如何以角度扩展/折叠多个面板？

Question

如何一次扩展多个手风琴（面板）项目。 展开/折叠动作也可以通过再次单击来切换。

Categories.html

<ul class="treeChildren"  *ngFor="let department of getAllDepartments; let i=index">
    <li class="treeChildrenItems">
        <div class="moduleListData" >
            <i (click)="showCategory(i);" [ngClass]="{'fa-caret-down': 'i == categoryIndex', 'fa-caret-right': 'i != categoryIndex'}" class="fa" ></i>
            <strong class="categoryName">{{department.departmentName}}</strong>
        </div>
  </li>
</ul>

category.compenent.ts

// Currently its working for single panel Expand/Collapse
categoryIndex : Number ;
  showCategory(index){
    if (this.categoryIndex == index) {
      this.categoryIndex = NaN;
    } else {
      this.categoryIndex = index
    }
  }

图片链接： https : //i.imgur.com/uvQ9BYr.png

Answer 1

<ul class="treeChildren"  *ngFor="let department of getAllDepartments; let i=index">
    <li class="treeChildrenItems">
        <div class="moduleListData" >
            <i (click)="department.expanded != department.expanded" [ngClass]="{'fa-caret-down': department.expanded, 'fa-caret-right': !department.expanded }" class="fa" ></i>
            <strong class="categoryName">{{department.departmentName}}</strong>
        </div>
  </li>
</ul>