如何以角度填充表格中的嵌套表单数组？

Question

我有一个对象数组，在每个对象内我都有一个对象数组。我想将那些内部对象数组（清单和权重）填充到表中。我得到的是，我可以填充对象数组，并且内部数组不显示每个行跨度。 附上我的输出和预期的输出图像 1: https://i.stack.imgur.com/DqYtD.png [2]：https://i.stack.imgur.com/vqVjs.png

HTML code;
     <table class="table table-xs table-sm table-hover">
    <thead class="table-primary">
    <tr>
    <th width="20%">Activity Name</th>
    <th width="15%">Activity Description</th>
    <th width="15%">Overall Percentage</th>
    <th width="10%">CheckList</th>
    <th width="10%">Weightage</th>
    </tr>
    </thead>
    <tbody>
    <ng-container formArrayName="activity_mappings" *ngFor="let activity of activityMappings['controls']; let i = index;">
     <ng-container [formGroupName]="i">
     <tr>
       <td>
     <input type="text" class="form-control form-control-sm" placeholder="Activity Name"
     formControlName="activity_name"/>
       </td>
     <td>
    <input type="text" class="form-control form-control-sm" placeholder="Description"
     formControlName="description"/>
      </td>
    <td>
    <input type="text" class="form-control form-control-sm" placeholder="Overall Percentage"
     formControlName="overall_percentage"/>
     </td>
      <ng-container formArrayName="check_lists" *ngFor="let ch of activity.check_lists;let checkListindex = index;">
    <ng-container [formGroupName]="checkListindex">
    <ng-container *ngIf="checkListindex > 0">
     <td>
     <input type="text" class="form-control form-control-sm" placeholder="CheckList" formControlName="check_list_title"/>
    </td>
    <td>
     <input type="text"  formControlName="weightage" class="form-control form-control-sm" placeholder="Weightage"/>
    </td>
    </ng-container>
     </ng-container>
    </ng-container>
     </tr>
    </ng-container>
    </ng-container>
    <tr *ngIf="activityMappings.length == 0">
      <td class="text-center" colspan="4">No Activities Found</td>
       </tr>
           </tbody>
     </table>

data population to table

示例对象：

activity_mappings ": [ { "
activity_name ": "
testing ", "
description ": "
som text ", "
overall_percentage ": 80, "
check_lists ":[ { "
check_list_title ": "
Done ", "
weightage ": "
20 " } ] }, { "
activity_name ": "
playing ", "
description ": "
some text ", "
overall_percentage ": 30, "
check_lists ":[ { "
check_list_title ": "
Not Done ", "
weightage ": "
30 " } ] } ]

Answer 1

您的清单不是 FormArray，所以在创建 formArray 时先更改行

 activityAuditMappings(obj?) {
    return this.fb.group({
      ...
      check_lists: this.fb.array(this.loopchecklist(obj)) //<--use this.fb.array
    });

一如既往地使用 FormArray，我们需要 FormArray 的 getter。当我们在 FormArray 中使用 FormArray 时，我们不能使用 getter 否则需要索引的简单函数

  getCheckListMappings(index:number): FormArray  {
    return this.activityMappings.at(index).get('check_lists') as FormArray
  }

你可以像这样使用

          <ng-container formArrayName="check_lists"
            *ngFor="let ch of getCheckListMappings(i).controls;let checkListindex = index;">
            <ng-container [formGroupName]="checkListindex">
              <ng-container *ngIf="checkListindex > 0">
                <td>
                  <input type="text" class="form-control form-control-sm" placeholder="CheckList"
          readonly="true"  formControlName="check_list_title"/>
                </td>
                <td>
                  <input type="text"  formControlName="weightage" class="form-control form-control-sm" placeholder="Weightage" readonly="true" />
                </td>
              </ng-container>
            </ng-container>
          </ng-container>

真的，我想您想在 td 中创建一个表以允许更改 checkList 的值

  <tbody>
    <ng-container formArrayName="activity_mappings">
      <tr style="vertical-align:top" *ngFor="let activity of activityMappings['controls']; let i = index;" [formGroupName]="i">
        <td>
          <input type="text" class="form-control form-control-sm" placeholder="Activity Name"
            formControlName="activity_name" readonly="true" />
        </td>
        <td>
          <input type="text" class="form-control form-control-sm" placeholder="Description"
            formControlName="description" readonly="true" />
        </td>
        <td>
          <input type="text" class="form-control form-control-sm" placeholder="Overall Percentage"
            formControlName="overall_percentage" readonly="true" />
        </td>
        <td colspan="2">
          <table style="border-collapse: collapse;border:0" formArrayName="check_lists">
            <tr *ngFor="let ch of getCheckListMappings(i).controls;let checkListindex = index;"
              [formGroupName]="checkListindex">
              <td>
                <input type="text" class="form-control form-control-sm" placeholder="CheckList"
          readonly="true"  formControlName="check_list_title"/>
              </td>
              <td>
                <input type="text"  formControlName="weightage" class="form-control form-control-sm" placeholder="Weightage" readonly="true" />
              </td>
          </table>
          <ng-container *ngIf="getCheckListMappings(i).controls.length == 0">
            No Activities Found
          </ng-container>
        </td>
      </tr>
    </ng-container>
  </tbody>

你可以看到你的forked stackblitz