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

您的元素是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>

Answer 2

我找到了解决方法：

问题是嵌套FormArray的初始化。

使用此代码段可以为我工作：

 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],
    }));
  }
}

}

使用外部* ngFor：照常使用html访问

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

Angular 6-访问嵌套formArray

2 个答案: