将 isExpanded() 与 ng-bootstrap 手风琴一起使用

Question

我正在使用 Angular 10 和 ng-bootstrap 来创建一个手风琴。 面板标题上的标题需要根据面板是折叠还是展开来显示“+”或“-”图标。 我无法确定 isExpanded 方法的正确用法是什么。

https://ng-bootstrap.github.io/#/components/accordion/api

<ngb-accordion [closeOthers]="true">
        <ngb-panel *ngFor="let item of items | keyvalue ; index as i; first as isFirst" id="ngb-panel-{{item.key}}" title="ngb-panel-{{item.key}}" type="dark">
            <ng-template ngbPanelHeader let-opened="{{isFirst ? 'opened' : ''}}">
                <div ngbPanelToggle class="d-flex align-items-center justify-content-between  bg-dark text-white">
                    <h5 class="m-0" ngbPanelToggle>
                        <button ngbPanelToggle class="text-white btn btn-link p-0">
                            <i class="fas fa-plus white plus-icon" *ngIf="isExpanded('ngb-panel-{{item.key}}')"></i>
                            <i class="fas fa-minus white minus-icon" *ngIf="!isExpanded('ngb-panel-{{item.key}}')"></i>

                            <!-- Alternatively? -->
                            <i class="fas fa-plus white plus-icon {{ isExpanded ? 'd-none' : 'd-inline'}}"  ></i>
                            <i class="fas fa-minus white minus-icon {{ isExpanded ? 'd-inline' : 'd-none'}}"></i>-->
                            {{item.key}}
                        </button>
                    </h5>
                </div>
            </ng-template>
            <ng-template ngbPanelContent>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </ng-template>
        </ngb-panel>
    </ngb-accordion>

Answer 1

示例代码解释如下：

检查这个 StackBlitz： https ://stackblitz.com/edit/angular-b5n7n1 ? file = src%2Fapp%2Fapp.component.ts

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

Answer 2

我相信你正在寻找这样的东西：

<ngb-accordion #acc="ngbAccordion">
<ngb-panel id="panel1">
    <ng-template ngbPanelTitle>
        <i class="icon" [ngClass]="acc.isExpanded('panel1')? 'icon-expand:'icon-collapse'"><span>Title</span>
    </ng-template>
    <ng-template>
        Text Here
    <ng-template>
</ngb-panel></ngb-accordion>