Angular 4+ bootstrap NgbAccordion 如何全部展开/折叠

Question

我一直在将 angular 与 ng-bootstrap 结合使用，但我对以下内容感到困惑:

我的页面上有这个 NgbAccordion:

<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>

这导致一些 ngb-panels 全部崩溃。这正是我想要的，我可以通过单击它们来切换应用程序容器对象的扩展。

我还想要一个按钮来展开所有 ngb-panel。我似乎无法让它工作。我找到了一个基于 Angularjs (<2) 的很好的示例，但它不起作用，并且似乎曾经存在的 [isOpen] 选项不再存在了？!

我的 Angular 分量:

import {Component, Input} from '@angular/core';
import {Answer} from '../model/answer';
@Component({
  selector: 'app-answer',
  templateUrl: './answer.component.html',
  styleUrls: ['./answer.component.css'],
  providers: []
})
export class AnswerComponent {
  @Input() answer: Answer;

  constructor() {
  }
}

任何帮助将不胜感激...

Answer 1

可以在 Accordion 上使用activeIds输入

https://ng-bootstrap.github.io/#/components/accordion/api

基本上，为每个面板分配一个唯一的 ID

<ngb-panel *ngFor="let container ...; let i= index" title="Panel{{i}}" id="panel-{{i}}"

并在您的组件中声明一个事件 ID 列表(= 必须打开的面板的 ID)

activeIds: string[] = [];

然后在您想要打开/关闭面板时修改该列表

this.activeIds = [];//All panels closed
this.activeIds = ['panel-1', 'panel-2']; //panels 1 and 2 are open

并将这个变量绑定(bind)到 Accordion 的activeIds输入

<ngb-accordion #acc="ngbAccordion" [activeIds]="activeIds"

最后，添加按钮

<button (click)="activeIds=[]" >close all</button>
<button (click)="openAll()" >open all</button>

openAll()
{
    this.activeIds = [/* add all panel ids here */];
}

我创建了一个 stackblitz 来说明这一点

https://stackblitz.com/edit/angular-nzzwnc?file=app%2Fapp.component.ts