如何在 ngx-bootstrap Accordion 中添加折叠图标

Question

在我使用ngx-bootstrap 的Angular应用程序中，我想添加一个折叠图标来反映手风琴的状态（折叠/展开），如下所示：

Answer 1

这是一个对我有用的解决方案

<accordion-group [isOpen]="false" #myGroup>
  <button class="btn btn-light float-right">
    {{ myGroup?.isOpen ? 'Opened' : 'Closed' }}
    <i class="fas" [ngClass]="{'fa-caret-down': myGroup?.isOpen, 'fa-caret-up': !myGroup?.isOpen}"></i>
  </button>
</accordion-group>

Answer 2

你基本上可以在 css 中做到这一点：

.accordion-toggle[aria-expanded="true"]:before {
    content: "\f107";
    font: normal normal normal 14px/1 FontAwesome;
}

.accordion-toggle[aria-expanded="false"]:before {
    content: '\f106';
    font: normal normal normal 14px/1 FontAwesome;
}

只需要使用您最喜欢的图标的字体系列来设置之前选择器的样式...