typescript Angular 4+ bootstrap NgbAccordion 如何展开/折叠所有
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49454549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4+ bootstrap NgbAccordion how to expand / collapse all
提问by Ivonet
I've been playing around with angular in combination with ng-bootstrap and I am stumped about the following:
我一直在与 ng-bootstrap 结合使用 angular，但我对以下内容感到困惑：
I have this NgbAccordion on my page:
我的页面上有这个 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>
this results in a lit of ngb-panels all collapsed. This is precisely what I want and I can toggle the expansion of the app-container objects by clicking on them.
这导致一盏 ngb 面板全部倒塌。这正是我想要的，我可以通过单击它们来切换应用程序容器对象的扩展。
I also want a button to expand all the ngb-panels. I can't seem to get it to work. I found a nice example based on Angularjs (<2) but that does not work and the [isOpen] option that seemed to have been there at one time does not exist anymore?!
我还想要一个按钮来展开所有 ngb-panels。我似乎无法让它工作。我找到了一个基于 Angularjs (<2) 的很好的例子，但这不起作用，而且似乎曾经存在过的 [isOpen] 选项不再存在？！
My angular component:
我的角度分量：
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() {
}
}
Any help would be appreciated...
任何帮助，将不胜感激...
回答by David
You can use the activeIdsinput on the accordion
您可以使用activeIds手风琴上的输入
https://ng-bootstrap.github.io/#/components/accordion/api
https://ng-bootstrap.github.io/#/components/accordion/api
Basically, assign a unique id to each of your panels
基本上，为每个面板分配一个唯一的 id
<ngb-panel *ngFor="let container ...; let i= index" title="Panel{{i}}" id="panel-{{i}}"
and declare in your component a list of the active ids (= ids of the panels that must be open)
并在您的组件中声明活动 ID 列表（= 必须打开的面板的 ID）
activeIds: string[] = [];
Then modify that list when you want to open/close the panels
然后在要打开/关闭面板时修改该列表
this.activeIds = [];//All panels closed
this.activeIds = ['panel-1', 'panel-2']; //panels 1 and 2 are open
And bind this variable to the activeIdsinput of the accordion
并将这个变量绑定到activeIds手风琴的输入
<ngb-accordion #acc="ngbAccordion" [activeIds]="activeIds"
Finally, add the buttons
最后，添加按钮
<button (click)="activeIds=[]" >close all</button>
<button (click)="openAll()" >open all</button>
openAll()
{
this.activeIds = [/* add all panel ids here */];
}
I created a stackblitz to illustrate this
我创建了一个 stackblitz 来说明这一点
https://stackblitz.com/edit/angular-nzzwnc?file=app%2Fapp.component.ts
https://stackblitz.com/edit/angular-nzzwnc?file=app%2Fapp.component.ts
回答by Baruch G.
= Here is a solution that will allow you to open only one accordion at a time. you can use with (panelChange) Captures changes of ngb like this:
= 这是一个允许您一次只打开一个手风琴的解决方案。您可以使用 with (panelChange) 捕获 ngb 的更改，如下所示：
html:
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:
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;
}
