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

Question

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

       <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手风琴，因此请使用ViewChildren。 （ViewChild只获得第一个ng手风琴）

@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()
   })
}