Angular：如何仅隐藏动态生成父组件对应行的子组件

问题根源在于你用了全局的hideItem变量，所有行的child-component都绑定这个变量，导致切换开关时所有行的子组件同步显示/隐藏。要实现仅控制当前行的效果，需要把隐藏状态绑定到每一行独立的表单组中，让每行拥有自己的状态。

修改步骤及代码： #

1. 更新表单结构：给每个新建的表单组添加isChildHidden字段，用来存储当前行子组件的隐藏状态
2. 调整模板绑定：将子组件的[hidden]绑定到当前行表单组的isChildHidden字段，同时在开关的valueChange事件中传递当前行的索引
3. 修改切换逻辑：通过索引定位到当前行的表单组，仅更新该行的状态

修改后的组件逻辑代码：

newItem(): FormGroup {
  return this.fb.group({
    itemNumber: new FormControl(null),
    isChildHidden: new FormControl(true) // 新增字段，控制当前行子组件隐藏
  });
}

addNewItem() {
  this.itemArray.push(this.newItem());
}

onToggle(isEnabled: boolean, index: number) {
  // 仅更新当前行的子组件隐藏状态
  this.itemArray.at(index).patchValue({
    isChildHidden: !isEnabled
  });
}

修改后的模板代码：

<div [formGroup]="item" *ngFor="let item of itemArray.controls; let i = index; let isLast = last">
  <input formControlName="itemNumber" />
  <!-- 绑定开关的选中状态，与子组件隐藏状态对应 -->
  <kendo-switch (valueChange)="onToggle($event, i)" [checked]="!item.get('isChildHidden')?.value"></kendo-switch>
  <!-- 绑定当前行的isChildHidden状态 -->
  <child-component [hidden]="item.get('isChildHidden')?.value"></child-component>
</div>

说明： #

• 每个行的表单组独立维护自己的isChildHidden状态，切换开关时只会修改当前行的状态，不会影响其他行
• 给Kendo Switch添加[checked]绑定，保证开关的选中状态和子组件的隐藏状态一致（初始时isChildHidden为true，开关未选中，子组件隐藏，和你原来的逻辑匹配）

内容的提问来源于stack exchange，提问作者TrevorGoodchild