了解 Bootstrap 手风琴在 Angular 5 中是否打开

Question

我正在尝试在 Bootstrap 手风琴中显示不同的图标，以指示它是打开的还是当前关闭的，但我不确定如何获取这些数据。

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" is-open="isOpen" >
<ngb-panel>
<ng-template ngbPanelTitle>
<span>Some title</span>
<span class="pull-right">
<div *ngIf="isopen">
<fa name="minus"></fa>
</div>
<div *ngIf="!isopen">
<fa name="plus"></fa>
</div>
</span>
</ng-template>
<ng-template ngbPanelContent>
Some text
</ng-template>
</ngb-panel>
</ngb-accordion>

这些示例没有涵盖它，我只找到了角度 ui 的示例。

谢谢。

Answer 1

您可以使用 panelChange 事件来了解面板或是否打开，该事件具有 nextState 参数。这是 html 代码：

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" (panelChange)="test($event)" >
<ngb-panel>
<ng-template ngbPanelTitle>
<span>Some title</span>
<div class="pull-right">
<div *ngIf="openById['ngb-panel-0']">
open
</div>
<div *ngIf="!openById['ngb-panel-0']">
close
</div>
</div>
</ng-template>
<ng-template ngbPanelContent>
Some text
</ng-template>
</ngb-panel>
</ngb-accordion>

和 ts 文件：

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
openById = {};
test(event){
this.openById[event.panelId] = event.nextState;
}
}

Answer 2

我不确定这是否是最好的解决方案，但您可以使用例如"activeIds"属性，如下所示：

import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
...
export class SomeComponent implements OnInit {
@ViewChild('accordion') accordion: NgbAccordion;
data: any[];
...
isOpen(i): boolean {
return this.accordion && this.accordion.activeIds.includes(i.toFixed());
}
...
}

和 html 模板：

<ngb-accordion #accordion>
<ngb-panel *ngFor="let item of data, let i=index" id="{{i}}">
<ng-template ngbPanelTitle>
<div class="row">
<div>{{item.title}}</div>
<div>
<span [ngClass]="{'icon-arrow-up': isOpen(i), 'icon-arrow-down': !isOpen(i)}"></span>
</div>
</div>
</ng-template>
<ng-template ngbPanelContent>
<div>{{item.content}}</div>
</ng-template>
</ngb-panel>
</ngb-accordion>

Answer 3

另一种方法是使用你自己的"面板[]"并将其填充在ngInit((上，然后使用(panelChange(="beforeChange($event("来反转面板状态。然后检查您自己的数组属性。

ngOnInit() {
this.panels = [];
this.sections.forEach((section, index) => {
this.panels.push({
id: index,
state: false
});
});
}
beforeChange(evt) {
const panel = this.panels.find(p => p.id === toNumber(evt.panelId));
if (panel) {
panel.state = !panel.state;
}
}
isOpen(i){
const panel = this.panels.find(p => p.id === i);
if (panel) {
return panel.state;
}
return false;
}
<ngb-accordion #accordion (panelChange)="beforeChange($event)">
<ngb-panel *ngFor="let section of sections, let i=index" id="{{i}}">
<ng-template ngbPanelTitle></ng-template>
<ng-template ngbPanelContent>
<div *ngIf="isOpen(i)">{{'Panel is open'}}</div>
</ng-template>
</ngb-panel>
</ngb-accordion>