Angular 5中如何判断Bootstrap手风琴状态并切换图标

嘿，我来帮你搞定这个手风琴图标切换的问题～ 你之前的代码里把is-open属性放在了ngb-accordion上，这是不对的，这个状态属性其实是属于每个ngb-panel面板的，下面给你两种简单的实现方式：

方法一：双向绑定面板状态（适合单面板或需要在组件里控制状态的场景） #

首先在组件类里定义一个变量来存储面板的展开状态，然后给ngb-panel做双向绑定，最后在模板里根据这个变量动态切换图标：

组件类代码： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始状态和你设置的activeIds对应，这里默认展开第一个面板
  isPanelOpen = true;
}

模板代码： #

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel [(open)]="isPanelOpen">
    <ng-template ngbPanelTitle>
      <span>Some title</span>
      <span class="pull-right">
        <!-- 直接根据isPanelOpen的值切换图标 -->
        <fa [name]="isPanelOpen ? 'minus' : 'plus'"></fa>
      </span>
    </ng-template>
    <ng-template ngbPanelContent>
      这里是面板的内容区域～
    </ng-template>
  </ngb-panel>
</ngb-accordion>

方法二：直接通过模板变量访问面板状态（适合多面板场景，更简洁） #

如果是多个面板的情况，不用每个都在组件里定义变量，直接给每个ngb-panel加个模板变量，然后访问它的open属性就行：

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <!-- 第一个面板 -->
  <ngb-panel #firstPanel>
    <ng-template ngbPanelTitle>
      <span>Some title</span>
      <span class="pull-right">
        <fa [name]="firstPanel.open ? 'minus' : 'plus'"></fa>
      </span>
    </ng-template>
    <ng-template ngbPanelContent>
      第一个面板内容
    </ng-template>
  </ngb-panel>

  <!-- 第二个面板 -->
  <ngb-panel #secondPanel>
    <ng-template ngbPanelTitle>
      <span>Another title</span>
      <span class="pull-right">
        <fa [name]="secondPanel.open ? 'minus' : 'plus'"></fa>
      </span>
    </ng-template>
    <ng-template ngbPanelContent>
      第二个面板内容
    </ng-template>
  </ngb-panel>
</ngb-accordion>

原理说明 #

ngb-panel组件本身自带一个open属性，用来标识当前面板是展开还是收起状态。我们要么通过双向绑定把这个状态同步到组件类的变量里，要么直接通过模板变量访问这个属性，就能轻松实现图标的动态切换啦～

内容的提问来源于stack exchange，提问作者nimrod