Angular - nested formArray

Hi ich habe den use case in einem formArray, neben einfachen formcontrols, noch ein weiteres Formarray zu haben.
Ich bekomme leider in meinem templatescript kein zugriff auf das nested formArray.


https://stackoverflow.com/questions/...ther-formarray
Sah vielversprechend aus, hat aber leider nicht geholfen bei mir.

HTML-Code:

---

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

---

Hier bekomme ich meine eigene Form initialisiert und mittels {{ existingFlavForm.value | json }} bekomme ich auch alle werte im templatescript angezeigt.

Nun das templatescript:



<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 *ngFor="let ing of existingFlavForms.controls[i].ingrs.controls; let j = index" [formGroupName] = "j"> // zeile 176
{{ing}}
</div>
</div>
</div>

</mat-expansion-panel>
</div>
</div>
</form>

So ist meine Form strukturiert:
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([
this.fb.group({
ingr: [this.cocktails[i].ingr]
})
])
}));
}

die einzige Fehlermeldung aus dem browser:
https://www.imagebanana.com/s/1343/h1szBhPj.html