Question

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

<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>

示例没有涵盖它，我只找到了angular-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

另一种方法是使用自己的'panels []'并将其填充在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>

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

3 个答案: