Angular:隐藏动态创建的父级的子组件

Question

我正在为一个应用程序开发POC，我只是为页面的一部分添加和删除行。相当标准的布局：

<div [formGroup]="item" *ngFor="let itemof itemArray.controls; let i = index; let isLast = last">
<input formControlName="itemNumber" />
<kendo-switch (valueChange)='onToggle($event);'></kendo-switch>
<child-component [hidden]="hideChild"></child-component>
</div>

在后端：

hideItem= true;
newItem(): FormGroup {
return this.fb.group({
itemNumber: new FormControl(null)
});
}
addNewItem() {
this.itemArray.push(this.newItem());
}
onToggle(isEnabled: boolean) {
this.hideItem= !isEnabled;
}

问题是，当我试图切换子组件的可见性时，它会为每个项目切换子组件，而不仅仅是我所在的行。试图弄清楚如何让它只命中该行的特定子组件。

Answer 1

您需要为itemArray.controls的每个控件保留一个状态。我建议你改变你的hideChild财产。

模板：

<div [formGroup]="item" *ngFor="let itemof itemArray.controls; let i = index; let isLast = last">
<input formControlName="itemNumber" />
<kendo-switch (valueChange)='onToggle($event, i);'></kendo-switch>
<child-component [hidden]="hideChild[i]"></child-component>
</div>

组件.ts

hideChild: Record<number, boolean> = {};
newItem(): FormGroup {
return this.fb.group({
itemNumber: new FormControl(null)
});
}
addNewItem() {
this.itemArray.push(this.newItem());
}
onToggle(isEnabled: boolean, i: number) {
this.hideChild[i]= !isEnabled;
}