javascript - 基于对象响应 Angular 显示复选框

我想基于对象响应创建动态checkbox，它应基于此响应创建多个checkbox：test.json[ { "header":{ "serviceId":"inquiry-service", "productCode":"JPJXXX", "transactionId":"cfad2ac7c16XXX" }, "data":{ "items":[ { "offenceType4":"", "permSpeed":"110", "actSpeed":"123", "itemAttributes":{ "attribute5":"", "attribute4":"VQ3XXX", "attribute7":"14.21.00", "attribute6":"2018-03-22", "attribute1":"XXXXX", "attribute3":"XXXXXX", "attribute2":"XXXXXX" }, "offenceLoc":"XXXXXX", "itemNo":"1", "summonDate":"2018-04-02", "distCode":"XXXXXX", "summonType":"2", "hbtlOffndr":"N", "itemAmount":15000, "itemAttributesCount":7, "summonAmt":"150.00", "offenceType1":"48", "offenceCode1":"XXXXXX", "offenceType2":"", "offenceCode2":"", "offenceType3":"", "category":"4", "offenceCode3":"", "offenceCode4":"", "respCode":"XXXXXX" }, { "offenceType4":"", "permSpeed":"110", "actSpeed":"123", "itemAttributes":{ "attribute5":"", "attribute4":"XXXXXX", "attribute7":"10.13.31", "attribute6":"2018-06-16", "attribute1":"XXXXXX", "attribute3":"XXXXXX", "attribute2":"XXXXXX" }, "offenceLoc":"XXXXXX", "itemNo":"2", "summonDate":"2018-07-23", "distCode":"XXXXXX", "summonType":"2", "hbtlOffndr":"N", "itemAmount":15000, "itemAttributesCount":7, "summonAmt":"150.00", "offenceType1":"48", "offenceCode1":"XXXXXX", "offenceType2":"", "offenceCode2":"", "offenceType3":"", "category":"4", "offenceCode3":"", "offenceCode4":"", "respCode":"XXXXXX" } ], "status":{ "code":"", "message":"" }, "additionalProperties":{ "serviceFee":0, "total":0, "deliveryFee":0, "foreignCardSurcharge":0, "serviceFeeTax":0, "subTotal":0, "deliveryFeeTax":0 }, "metadata":{ "count":2 } }, "status":{ "code":"200", "message":"OK" }}]我想要的是根据data.items创建的复选框，如果items由2个数组组成，则应该创建2个checkboxes。然后，如果我筛选并仅得到提交时如何添加header.transactionId。我创建了演示stackblitz，这是我尝试过的：Ts文件 receivedSummons: SummonModel[]; selectedSummon: string; form: FormGroup; constructor( private inquiryStore: InquiryStoreService, private formBuilder: FormBuilder ) { this.form = this.formBuilder.group({ receivedSummons: new FormArray([], minSelectedCheckboxes(1)) }); } ngOnInit() { this.getReceivedSummons(); } getReceivedSummons() { this.inquiryStore.summons$.subscribe(receivedSummons => { this.receivedSummons = receivedSummons; this.addCheckboxes(); }) } addCheckboxes() { this.receivedSummons.map((i) => { const control = new FormControl; (this.form.controls.receivedSummons as FormArray).push(control); }); } submitSelectedCheckboxes() { this.selectedSummon = this.form.value.receivedSummons .map((v, i) => (v ? this.receivedSummons[i] : null)) .filter(v => v !== null); console.log(this.selectedSummon) }}HTML文件<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()"> <label formArrayName="receivedSummons" *ngFor="let summon of form.controls.receivedSummons.controls; let i = index"> <input type="checkbox" [formControlName]="i"> </label> <div *ngIf="!form.valid">At least one order must be selected</div> <br> <button [disabled]="!form.valid">submit</button></form>我可以就如何解决这个问题使用一些指导和建议。 最佳答案 首先，在使用FormBuilder时，请不要直接实例化FormControl或FormArray。而是使用FormBuilder这样做。this.form = this.formBuilder.group({ receivedSummons: this.formBuilder.array([])});由于您的response是array，因此您可以获得多个receivedSummons，其中可以包含多个data.items。您需要使用其他表单结构来解决您的问题。您的addCheckboxes函数可能如下所示。addCheckboxes() { this.formReceivedSummons.setValue([]); this.receivedSummons.map(x => { const group = this.formBuilder.group({ header: [x.header.transactionId], items: this.formBuilder.array([], [minSelectedCheckboxes(1)]) }); x.data.items.map(y => { (group.get('items') as FormArray).push(this.formBuilder.group({ name: [y.itemNo], isChecked: [''] })); }); this.formReceivedSummons.push(group); });}还要相应地更改html文件。<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()"> <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index"> <ng-container [formGroup]="summon"> <p>{{summon.value.header}}</p> <ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index"> <ng-container [formGroup]="item"> <input type="checkbox" formControlName="isChecked"> {{item.value.name}} </ng-container> </ng-container> </ng-container> <div *ngIf="!summon.valid">At least one order must be selected</div> </ng-container> <br> <button [disabled]="!form.valid">submit</button></form>这里有2个getter用于获取receivedSummons和items FormArrayget formReceivedSummons() { return this.form.get('receivedSummons') as FormArray;}formReceivedSummonsItems(i: number) { return (this.formReceivedSummons.controls[i].get('items')) as FormArray;}Here您可以找到完整的演示。关于javascript - 基于对象响应 Angular 显示复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57831605/