在 ngFor 循环中关闭所有 angular bootstrap 手风琴

Question

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

       <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 循环中创建的第一个。 None 个关闭。

我如何定位或遍历所有动态创建的手风琴并调用它们的 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()
   })
}

在 ngFor 循环中关闭所有 angular bootstrap 手风琴

Close all angular bootstrap accordions in an ngFor loop

angular-bootstrap

ng-bootstrap

angular