Angular 6 - 访问嵌套的 formArray
Angular 6 - Access to nested formArray
晚上好,
我已经构建了一个具有反应形式的结构。有一个鸡尾酒阵列,其中包括一个成分阵列。
这应该以我称为 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
您的元素是 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>
我找到了解决方案:
问题是嵌套的 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],
}));
}
}
}
在 html 中访问像往常一样使用外部 *ngFor:
<div formArrayName="liqs">
<div *ngFor="let ingr of getIngredients(flav); let j = index" [formGroupName]="j">
</div>
</div>
晚上好,
我已经构建了一个具有反应形式的结构。有一个鸡尾酒阵列,其中包括一个成分阵列。
这应该以我称为 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
您的元素是 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>
我找到了解决方案:
问题是嵌套的 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],
}));
}
}
}
在 html 中访问像往常一样使用外部 *ngFor:
<div formArrayName="liqs">
<div *ngFor="let ingr of getIngredients(flav); let j = index" [formGroupName]="j">
</div>
</div>