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";
    }
  }
}