关闭 ngFor 循环中的所有角引导手风琴

Question

我有一种情况，在 ngFor 循环中创建了一系列 ngb-accordions，为数据中标记为手风琴的每个项目创建一个：

       <span *ngFor="let item of menu.items">
        <!-- accordion menus -->
        <ngb-accordion
          #pageAccordion="ngbAccordion"
          *ngIf="item.url === '#accordion'" //in the json, says this item is an accordion
          [activeIds]="activePanel"
          [destroyOnHide]="false"
        >

该组件有这个手风琴的视图子：

  @ViewChild('pageAccordion', { static: false })
  pageAccordion: NgbAccordion;

我想折叠所有的手风琴：

    this.pageAccordion.collapseAll();

问题在于它只会折叠在 ngFor 循环中创建的第一个。其他都没有关闭。

如何定位或循环遍历所有动态创建的手风琴并调用它们的collapseAll 方法？

我正在使用 Angular 8 和 Angular Bootstrap 5.0

Answer 1

您有多个 ng-accordion，所以请使用 ViewChildren。 （ViewChild 只获取第一个 ng-accordion）

@ViewChildren('pageAccordion') pageAccordions:QueryList<NgbAccordion>
//you can use also
//@ViewChildren(NgbAccordion) pageAccordions:QueryList<NgbAccordion>


//a function to close all the accordions
closeAll()
{
   this.pageAccordions.forEach(acc => {
      acc.collapseAll()
   })
}