Angular 如何处理formArrayName/formGroupName的两个实例？

基于这个线程：我设法用这些值正确地显示我的网格。问题是，如果我在同一页上有这个网格的相同实例，第一个网格的值将显示在第二个网格中。我假设这是预期的行为，因为它们具有相同的formGroupName和相同的formArrayName

您可以在此处查看bahavior：

这是我的HTML：

  <tbody *ngIf="editMode" formArrayName="itemsForm">
    <tr *ngFor="let item of parentForm.controls.itemsForm.controls; let i = index" >
      <ng-container formGroupName="{{i}}">
        <td><span>{{ item.value.categoryName }}</span></td>
        <td><input type="number" tabindex="1" autocomplete="off" formControlName="value" /></td>
        <td>
          <app-status [status]="item.value.status"></app-status>
        </td>
      </ng-container>
    </tr>
  </tbody>

如果我只有一个网格，这一切就像一个魅力。我必须给我的组件一个Id吗？这真的有必要吗

编辑：

我通过将formarayName作为@Input参数传递来解决这个问题：

@Input() public itemsForm;

public ngOnInit(): void {
  this.createForm();
}

private createForm(): void {
  let controls = new FormArray([]);

  // the data you have received, for each object create a form group
  this.items.forEach(item => {
    controls.push(new FormGroup(
    {
      categoryName: new FormControl(item.categoryName),
      value: new FormControl(item.value),
      status: new FormControl(item.status)
    }));
  });

  this.parentForm.addControl(this.itemsForm, controls);
}

现在，在父组件中，我只需为子组件的每个实例为

itemsForm

属性指定不同的名称：

<app-my-grid [itemsForm]="'arrayNamed1'" *ngIf="datasource1" [parentForm]="prognoseMeldungForm" [items]="datasource1" [editMode]="isEditMode"></app-my-grid>

<app-my-grid [itemsForm]="'arrayNamed2'" *ngIf="datasource2" [parentForm]="prognoseMeldungForm" [items]="datasource2" [editMode]="isEditMode"></app-my-grid>

---

这有意义吗？

为什么不编写一个具有独立作用域的自定义指令？您是在学习angularjs还是angularjs？我不知道你对具有隔离作用域的指令是什么意思

<app-my-grid [itemsForm]="'arrayNamed1'" *ngIf="datasource1" [parentForm]="prognoseMeldungForm" [items]="datasource1" [editMode]="isEditMode"></app-my-grid>

<app-my-grid [itemsForm]="'arrayNamed2'" *ngIf="datasource2" [parentForm]="prognoseMeldungForm" [items]="datasource2" [editMode]="isEditMode"></app-my-grid>