Angular 4+ 中 NgbAccordion 如何实现全部展开/折叠功能？

你说得没错，ng-bootstrap的NgbAccordion在新版本里确实移除了旧的isOpen输入属性，之前AngularJS时代的方法自然也不适用了。不过别担心，咱们可以用当前版本官方提供的API轻松实现一键展开全部面板的功能，步骤很简单：

第一步：在组件类中获取NgbAccordion实例 #

你已经在模板里给accordion加了#acc="ngbAccordion"的模板引用，现在只需要在组件类里用@ViewChild来获取这个实例，这样就能调用它的内置方法了。修改后的组件代码如下：

import {Component, Input, ViewChild} from '@angular/core';
import {Answer} from '../model/answer';
import {NgbAccordion} from '@ng-bootstrap/ng-bootstrap'; // 必须导入这个类

@Component({
  selector: 'app-answer',
  templateUrl: './answer.component.html',
  styleUrls: ['./answer.component.css'],
  providers: []
})
export class AnswerComponent {
  @Input() answer: Answer;
  @ViewChild('acc') accordion: NgbAccordion; // 通过模板引用获取accordion实例

  constructor() { }

  // 一键展开所有面板的方法
  expandAllPanels() {
    this.accordion.expandAll();
  }

  // 可选：一键折叠所有面板的方法，按需添加
  collapseAllPanels() {
    this.accordion.collapseAll();
  }
}

第二步：在模板中添加触发按钮 #

在你的NgbAccordion组件上方或者合适的位置，添加一个按钮，绑定点击事件到刚才定义的expandAllPanels()方法即可。修改后的模板代码：

<!-- 一键展开按钮，样式可以根据你的需求调整 -->
<button class="btn btn-primary mb-3" (click)="expandAllPanels()">全部展开</button>
<!-- 可选：添加折叠全部的按钮 -->
<button class="btn btn-secondary mb-3" (click)="collapseAllPanels()">全部折叠</button>

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel *ngFor="let container of answer.resultObj.containers.containers" title="{{container.metadata.title}}">
    <ng-template ngbPanelContent>
      <app-containers [container]="container"></app-containers>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

补充说明 #

• expandAll()和collapseAll()是ng-bootstrap当前稳定版本（v10及以上）NgbAccordion提供的官方内置方法，完全符合当前API规范，不会有兼容性问题。
• 确保你已经在项目中正确导入了NgbAccordionModule到你的模块文件里，否则组件和方法会无法被识别。

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