Angular 4+ bootstrap NgbAccordion 如何展开/折叠所有答案

【问题标题】：Angular 4+ bootstrap NgbAccordion how to expand / collapse allAngular 4+ bootstrap NgbAccordion 如何展开/折叠所有
【发布时间】：2018-09-02 10:03:28
【问题描述】：

我一直在尝试将 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 面板全部折叠。这正是我想要的，我可以通过单击它们来切换应用容器对象的扩展。

我还想要一个按钮来展开所有 ngb 面板。我似乎无法让它工作。我找到了一个基于 Angularjs (

我的角度分量：

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() {
  }
}

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

【问题讨论】：

谁能帮我解决这个问题。 stackoverflow.com/questions/68889114/…

标签： angular typescript ng-bootstrap

【解决方案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 */];
}

我创建了一个堆栈闪电战来说明这一点

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

【讨论】：

感谢您的回复。我认为这会起作用，但恕我直言，我首先必须从我的动态输入项目列表中动态重新创建要在面板中显示的 id。
这只是一个班轮，就像我的例子一样（使用地图），不是吗？
不完全生成 ID 可能有问题，因为我在同一屏幕上多次使用该组件，并且输入“可能”包含相同的数据。但基本上我会根据你的解释和很好的例子来解决这个问题:-)
重要：它应该是 id="{{...}} 而不是 [attr.id]="..." 否则它将无法正常工作。

【解决方案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;
}

【讨论】：

【解决方案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。

【讨论】：