Angular reactive forms: FormArray中的未命名FormArray

Question

我不知道如何为我的数据类型显示正确的输入表(或者我构造FromGroup的方式是否有效)，所以我在这里介绍了我的组件

export class FoiFormComponent {

  listForm = new FormGroup({

    fois: new FormArray([

      new FormArray([
        new FormControl('01-01-2021'),
        new FormControl('101'),
        new FormControl('201')]),

      new FormArray([
        new FormControl('02-01-2021'),
        new FormControl('102'),
        new FormControl('202')])

    ])
  });

  constructor() {}

  getFois(): FormArray[] {
    return (this.listForm.get('fois') as FormArray).controls as FormArray[];
  }

}

我想要的结果应该如下所示

​

​

我试着这么做

  <table>
    <tr *ngFor="let foiArr of getFois; index as i" [formGroupName]="i">
      <td *ngFor="let row of foiArr.controls[i].controls; index as j">
        <input formControlName="j">
      </td>
    </tr>
  </table>

但是我得到的错误是'NgFor只支持绑定到迭代对象，比如数组。‘(即使它是数组，在代码中我也可以这样做console.log(this.getFois()[0]);

注意:该表在列和行中都是动态的，这就是为什么我没有为每个数组或formGroups命名的原因。任何帮助或提示都是非常感谢的。

Answer 1

如果有人感兴趣，我可以通过使用索引作为FormArrayName来实现：

<form [formGroup]="fois">

  <table>
    <ng-container *ngFor="let control of getFoiControls(); let i = index">
      <tr [formArrayName]="i">
        <td *ngFor="let row of getDay('' + i).controls; let j = index">
          <input [formControlName]="j">
        </td>
      </tr>
    </ng-container>

  </table>

</form>

在组件中：

fois = new FormGroup({});

  constructor() {}

  getDay(day: string): FormArray {
    return this.fois.get(day) as FormArray;
  }

  getFoiControls(): string[]{
    return Object.keys(this.fois.controls);
  }

  ngOnInit(): void {

    this.fois.addControl('0', new FormArray([
      new FormControl('01-01-2021'),
      new FormControl('101'),
      new FormControl('201')
    ]));
    this.fois.addControl('1', new FormArray([
      new FormControl('02-01-2021'),
      new FormControl('102'),
      new FormControl('202')
    ]));
    this.fois.addControl('2', new FormArray([
      new FormControl('02-01-2021'),
      new FormControl('103'),
      new FormControl('203')
    ]));

  }