Angular 6 - 访问嵌套的 formArray

Question

晚上好，

我已经建立了一个反应形式的结构。有一个鸡尾酒阵列，其中包括一个成分阵列。 这应该以我称为existingFlavForms 的反应形式进行投影。 问题是，我无法访问嵌套成分 formArray。

this.existingFlavForm = this.fb.group({
          flavs: this.fb.array([])
        });


for (let i = 0; i < this.cocktails.length; i++) {
      this.existingFlavForms.push(this.fb.group({
        id: [this.cocktails[i].id],
        c_name: [this.cocktails[i].c_name],
        mark: [this.cocktails[i].mark],
        imgUrl: [this.cocktails[i].imgUrl],
        ingrs: this.fb.array([
            {ingr: [this.cocktails[i].ingr]}
          ]
        )
      }));
    }

这是模板脚本，我尝试访问所有内容。

<form [formGroup]="existingFlavForm">
  <div formArrayName="flavs">
    <div *ngFor="let flav of existingFlavForms.controls; let i=index">
      <mat-expansion-panel class="myPanel">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <h3 class="text-info"> {{flav.value.c_name}} </h3>
          </mat-panel-title>
          <mat-icon class="mr-lg-3 mt-lg-2">settings</mat-icon>
          <mat-icon class="mr-lg-3 mt-lg-2" (click)="deleteCocktail()">delete</mat-icon>
        </mat-expansion-panel-header>
        <div class="row">
          <div [formGroupName]="i">
            <div formArrayName="ingrs">
              <p *ngFor="let ingr of flav[i].controls.ingrs.controls;">
                {{ingr.i_name}}
              </p>
            </div>
          </div>
        </div>
      </mat-expansion-panel>
    </div>
  </div>
</form>

我搜索了类似的问题，但找不到合适的解决方案。数据在那里并且完全初始化。

这表示浏览器控制台.. "TypeError: undefined is not an object (evaluating '_v.context.$implicit[_v.context.index].controls')"

最好的问候！

我现在添加了一个基本的 stackblitz，它显示了带有虚拟数据的一般数据结构。 https://stackblitz.com/edit/angular-l3ghac

Answer 1

我找到了解决办法：

问题是嵌套 FormArray 的初始化。

有了这个可以 sn-p 为我工作：

 initExistingFlavForm() {
this.clearArray();
for (let i = 0; i < this.cocktails.length; i++) {
  this.existingFlavForms.push(this.fb.group({
    id: [this.cocktails[i].id],
    c_name: [this.cocktails[i].c_name],
    mark: [this.cocktails[i].mark],
    imgUrl: [this.cocktails[i].imgUrl],
    liqs: this.fb.array([])
  }));
}
this.fillNestedIngredient();

}

fillNestedIngredient() {
for (let i = 0; i < this.cocktails.length; i++) {
  const ingrFormArray = this.existingFlavForm.get('flavs')['controls'][i].get('liqs') as FormArray;
  for (let c = 0; c < this.cocktails[i].ingr.length; c++) {
    ingrFormArray.push(this.fb.group({
      id: [this.cocktails[i].ingr[c].id],
      i_name: [this.cocktails[i].ingr[c].i_name],
      ml_bottle: [this.cocktails[i].ingr[c].ml_bottle],
    }));
  }
}

}

在 html 中的访问与往常一样使用外部 *ngFor:

<div formArrayName="liqs">
            <div *ngFor="let ingr of getIngredients(flav); let j = index" [formGroupName]="j">
            </div>
          </div>

Answer 2

您的元素是flav，因此在您的迭代中调用flav[i] 是多余的。在您的内部 for 循环中，将 flav[i].controls.ingrs.controls 替换为 flav.controls.ingrs.controls。

即

<p *ngFor="let ingr of flav.controls.ingrs.controls;">
    {{ingr.i_name}}
</p>