Angular实现多组元素独立显隐时所有隐藏项同时展开如何解决

问题原因 #

你当前所有隐藏项共用了同一个全局hidden布尔变量控制显隐，点击任意触发项都会修改这同一个变量，导致所有绑定了该变量的隐藏项同步触发显隐逻辑。

解决方案 #

方案1：同一时间仅允许展开一个父项 #

TS代码修改：

export class AppComponent {
  // 存储当前展开的父项唯一标识，null为全部收起
  activeItem: string | null = null;

  toggle(itemId: string) {
    // 点击已展开项则收起，否则切换为当前点击项展开
    this.activeItem = this.activeItem === itemId ? null : itemId;
  }

  getShowText(itemId: string): string {
    return this.activeItem === itemId ? 'show less' : 'show more';
  }
}

HTML代码修改：

<ul>
  <li>
    <a href="#" (click)="toggle('item1')"> Item 1 {{getShowText('item1')}}</a>
  </li>
  <li class="hidden" *ngIf="activeItem === 'item1'" style="color: green">Item 2</li>
  <li class="hidden" *ngIf="activeItem === 'item1'" style="color: green">Item 3</li>
  <li>
    <a href="#" (click)="toggle('itemA')"> Item A {{getShowText('itemA')}}</a>
  </li>
  <li class="hidden" *ngIf="activeItem === 'itemA'" style="color: red">Item B</li>
</ul>

方案2：允许同时展开多个父项 #

如果需要支持多个父项同时处于展开状态，改用对象存储每个项的独立显隐状态即可。

TS代码修改：

export class AppComponent {
  // 存储每个父项独立的展开状态
  expandStatus: Record<string, boolean> = {
    item1: false,
    itemA: false
  };

  toggle(itemId: string) {
    this.expandStatus[itemId] = !this.expandStatus[itemId];
  }

  getShowText(itemId: string): string {
    return this.expandStatus[itemId] ? 'show less' : 'show more';
  }
}

HTML代码修改：

<ul>
  <li>
    <a href="#" (click)="toggle('item1')"> Item 1 {{getShowText('item1')}}</a>
  </li>
  <li class="hidden" *ngIf="expandStatus.item1" style="color: green">Item 2</li>
  <li class="hidden" *ngIf="expandStatus.item1" style="color: green">Item 3</li>
  <li>
    <a href="#" (click)="toggle('itemA')"> Item A {{getShowText('itemA')}}</a>
  </li>
  <li class="hidden" *ngIf="expandStatus.itemA" style="color: red">Item B</li>
</ul>

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