Angular 6: ngBootstrap 手风琴面板收起与不收起时如何设置不同的标题

Question

我想在用 ngBootstrap 制作的手风琴中为面板设置不同的标题。 NgbPanel 有一个名为 isOpen 的 属性，但我如何获取它的值？

Answer 1

检查这个 StackBlitz：Dynamic accordion title

HTML 文件:

<div class="container">
  <ngb-accordion #acc="ngbAccordion" id="accordion" (panelChange)="changeTitle($event, acc)">
    <ngb-panel title="{{ title }}">
      <ng-template ngbPanelContent>
        Content
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
</div>

TS 文件：

export class AppComponent  {
  name = 'Angular';

  title: string = "TITLE WHEN NOT EXPANDED";

  changeTitle($event: NgbPanelChangeEvent, acc) {
    if (!acc.isExpanded($event.panelId)) {
      this.title = "TITLE WHEN EXPANDED";
    } else {
      this.title = "TITLE WHEN NOT EXPANDED";
    }
  }
}