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-panels。我似乎无法让它工作。我找到了一个基于 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

您可以在手风琴上使用 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[] = [];

然后在您想要 open/close 面板

时修改该列表

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

Answer 2

= 这是一个允许您一次只打开一个手风琴的解决方案。您可以使用 with (panelChange) 像这样捕获 ngb 的更改：

html:

   <ngb-accordion #acc="ngbAccordion"  [activeIds]="activeId"  (panelChange)="toggleAccordian($event)">
    <ngb-panel *ngFor="let option of options;" title="{{option}}">
        <ng-template ngbPanelContent>
                    <ul class="nav nav-tabs">
                      <!--some code-->
                    </ul>
        </ng-template>
    </ngb-panel>
</ngb-accordion>

ts:

activeId: string = "";

toggleAccordian(event) {
    // If it is already open you will close it and if it is closed open it
    this.activeId = this.activeId == event.panelId ? "" : event.panelId;
}

Answer 3

当前的 ng-bootstrap docu of 11.0.0 将 expandAll/collapseAll 显示为基本组件示例，他们的解决方案非常简单：

<button type="button" class="btn btn-sm ml-2" (click)="acc.collapseAll()">Collapse all</button>
<button type="button" class="btn btn-sm ml-2" (click)="acc.expandAll()">Expand all</button>
<br>
<ngb-accordion #acc="ngbAccordion">
    <!-- your accordion: ngb-panel, ng-template, etc.. -->
</ngb-accordion>

在文档中，按钮 [Collapse All] 是 ngb-Panel 的一部分 - 但您可以像上面展示的那样简单地将代码移出 ngb-accordion。

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

Angular 4+ bootstrap NgbAccordion how to expand / collapse all

typescript

ng-bootstrap

angular