Angular实现点击仅展示当前项子分类（不可修改HTML）

当前代码的问题在于用单个showSubItem布尔变量控制所有子分类的显示/隐藏，导致点击任意按钮都会触发所有子分类同时展开。要实现仅展开当前点击项的子分类，需要为每个项单独维护展开状态，具体步骤如下：

步骤1：在组件类中维护每个项的展开状态 #

替换原有的单个布尔变量，改用对象存储每个项的展开状态（如果是动态生成的列表，也可以用数组配合索引）：

// 组件.ts文件
export class YourComponent {
  // 用键值对存储每个项的展开状态，键为项的唯一标识
  expandedItems: { [key: string]: boolean } = {};

  toggleSubItem(itemKey: string) {
    // 切换当前项的展开状态，未定义时默认设为true
    this.expandedItems[itemKey] = !this.expandedItems[itemKey];
  }
}

步骤2：修改HTML代码，绑定对应项的状态 #

为每个按钮的点击事件传递当前项的唯一标识，并在子分类的*ngIf中绑定对应状态：

<div class="item">
  <div class="wrapper-main-item">
    <div class="main-item">
      <h2>Description</h2>
      <button (click)="toggleSubItem('item1')">show subcategory</button>
    </div>
  </div>
  <div class="sub-item" *ngIf="expandedItems['item1']">
    <textarea name="description"></textarea>
  </div>
</div>

<div class="item">
  <div class="wrapper-main-item">
    <div class="main-item">
      <h2>Description</h2>
      <button (click)="toggleSubItem('item2')">show subcategory</button>
    </div>
  </div>
  <div class="sub-item" *ngIf="expandedItems['item2']">
    <textarea name="description"></textarea>
  </div>
</div>

补充：动态生成列表的适配方案 #

如果你的项是通过*ngFor循环生成的，只需用项的唯一属性（比如id）或循环索引作为标识即可：

<div class="item" *ngFor="let item of items; let i = index">
  <div class="wrapper-main-item">
    <div class="main-item">
      <h2>{{ item.title }}</h2>
      <button (click)="toggleSubItem(i)">show subcategory</button>
    </div>
  </div>
  <div class="sub-item" *ngIf="expandedItems[i]">
    <textarea name="description"></textarea>
  </div>
</div>

这样每个项的展开状态都是独立的，点击某个按钮只会切换对应项的子分类显示状态，不会影响其他项。

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