Question

如何拥有多个面板＆gt;多个手风琴/多个面板＆gt;用一个按钮点击关闭单个手风琴？

尝试使用＆＃34; closeOthers＆＃34;在api中提到但是不起作用

Answer 1

在你的html文件中

<ngb-accordion #acc="ngbAccordion" (panelChange)="beforeChange($event)">
  <ngb-panel title="Title 1" id="id1">
    <ng-template ngbPanelContent>
      Panel 1
    </ng-template>
  </ngb-panel>
  <ngb-panel title="Title 2" id="id2">
    <ng-template ngbPanelContent>
      Panel 2
    </ng-template>
  </ngb-panel>
  <ngb-panel title="Title 3" id="id3">
    <ng-template ngbPanelContent>
      Panel 3
    </ng-template>
  </ngb-panel>
</ngb-accordion>

<button (click)="closeAll(acc)">Close all</button>

在你的ts文件中

  panels = [
    { id: 'id1', state: true },
    { id: 'id2', state: true },
    { id: 'id3', state: true }
  ];

  public beforeChange($event: NgbPanelChangeEvent) {
    for (let panel of this.panels) 
      if (panel.id === $event.panelId)
        panel.state = !panel.state;
  }

  closeAll(acc) {
    for (let panel of this.panels) 
      if (!panel.state)
        acc.toggle(panel.id);
  }

您使用面板ID和状态来保存一组对象。当您与其中一个面板交互时，使用beforeChange()更改面板的状态。当您单击按钮关闭所有toggle()时，仅打开处于打开状态的面板。

NgBootstrap手风琴组件

1 个答案: