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

Question

我一直在玩角度与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面板全部倒塌.这正是我想要的,我可以通过点击它们来切换app-container对象的扩展.

我还想要一个按钮来扩展所有ngb面板.我似乎无法让它发挥作用.我找到了一个基于Angularjs(<2)的好例子,但这不起作用,并且似乎一次存在的[isOpen]选项不再存在了？!

我的角度成分:

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

您可以使用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

并将此变量绑定到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