angular - 如何从api传递基于json的嵌套formarray动态形式的对象数组

Question

嗨，我正在处理具有动态表单数组的表单，我的要求是我有一个名为 specificationDetails 的数组，它有两个表单控制字段，attributeNameId 和 attributeValues。同样attributeValues是一个表单数组，其中formcontrol字段是attributevalueId，compositionValues，对于某些部分最大范围，最小范围会来。现在生成了 ui 部分，并添加了 ts 代码，但问题是由于 ui 是迭代的，一个字段是具有相同 formfield 属性 valueId 的下拉列表，另一个是带有复选框的表，该表在一列和另一列中显示数据是文本字段。当单击复选框时，它必须将 attributeValue id 和 compositionvalues 传递到数组中。现在它只绑定最后一个数据。我们如何解决这个问题。

html
------------------
    <ng-container formArrayName="itemSpecDetails">
                        <div *ngFor="let item of itemForm.get('itemSpecDetails').controls; let mainIndex = index;">
                            <div [formGroupName]="mainIndex">
                                <div *ngFor="let details of specificationDetails">
                                    <div formArrayName="attributeValues">
                                        <div  *ngFor="let specification of item.get('attributeValues').controls; let innerIndex = index;">
                                            <div [formGroupName]="innerIndex">
                                                <div [ngSwitch]="details.displayTye">
                                                    <div nz-col nzSpan="6">
                                                        <nz-form-item *ngSwitchCase="'MULTI_SELECT'">
                                                            <nz-form-label>{{details.attributeName.name}}
                                                            </nz-form-label>
                                                            <nz-select nzMode="multiple" nzPlaceHolder="Select Values"
                                                                class="dropdown-text"
                                                                formControlName="attributeValueId">
                                                                <nz-option
                                                                    *ngFor="let item of details.attributeName.attributeValue"
                                                                    [nzLabel]="item.name" [nzValue]="item.id">
                                                                </nz-option>
                                                            </nz-select>
                                                            <span
                                                                class="tolerance">Tolerance:{{details.toleranceThreshold}}%</span>

                                                        </nz-form-item>
                                                    </div>
                                                    <nz-form-item *ngSwitchCase="'MULTI_SELECT_TEXT_BOX'">
                                                        <div>
                                                            <nz-form-label>{{details.attributeName.name}}
                                                            </nz-form-label>
                                                            <span
                                                                class="tolerance-table">Tolerance:{{details.toleranceThreshold}}%</span>
                                                        </div>
                                                        <nz-table #rowSelectionTable
                                                            [nzData]="details.attributeName.attributeValue"
                                                            [class.overflow]="xOverflow"
                                                            [nzScroll]="{x: xscroll, y: yscroll}">
                                                            <thead>
                                                                <tr>
                                                                    <!-- <th nzLeft nzWidth="35px" [nzChecked]="checked"
                                                                    [nzIndeterminate]="indeterminate"
                                                                    (nzCheckedChange)="onAllChecked($event,details.attributeName.name)"></th> -->
                                                                    <ng-container *ngFor="let column of headerColumns">
                                                                        <th class="header-row">{{column}}</th>
                                                                    </ng-container>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr
                                                                    *ngFor="let data of rowSelectionTable.data;let i = index;">
                                                                    <td>
                                                                        <input nz-input type="checkbox"
                                                                            (change)="onChange(data.id, $event.target.checked)">
                                                                        <br>

                                                                    </td>
                                                                    <td class="data-value">
                                                                        {{data.name}}
                                                                    </td>
                                                                    <td>
                                                                        <nz-form-item>
                                                                            <nz-form-control>
                                                                                <input type="text"
                                                                                    formControlName="compositionValues"
                                                                                    nz-input
                                                                                    (blur)="onBlur($event.target.value)"
                                                                                    placeholder="Enter compositionValue " />
                                                                            </nz-form-control>
                                                                        </nz-form-item>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </nz-table>
                                                    </nz-form-item>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </ng-container>

ts
------------
 this.itemForm = this.formBuilder.group({
     
      itemSpecDetails: this.formBuilder.array([this.itemSpecDetailsArray()])

    })

get itemSpecDetails():FormArray {
    //  return form.get('itemSpecDetails').controls;
    return this.itemForm.get('itemSpecDetails') as FormArray;
  }
  
   itemSpecDetailsArray() {
    return this.formBuilder.group({
      attributenameId: [''],
      attributeValues:this.formBuilder.array([this.attributeValues]),
    });
  }
get attributeValues():FormGroup{
    return this.formBuilder.group({
      attributeValueId:[null],
      compositionValues:[''],
    })

onChange(item:any,compositionValue:any,isChecked: boolean) {
    console.log(item,compositionValue);
    
    if (isChecked) {
      console.log('yes');
     
    } 
} [enter image description here][1]


  [1]: https://i.stack.imgur.com/Pfbek.png

标签： angular