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

【问题标题】：How to add a collapse icon in ngx-bootstrap Accordion如何在 ngx-bootstrap Accordion 中添加折叠图标
【发布时间】：2019-05-07 11:22:48
【问题描述】：

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

【问题讨论】：

能否请您提供一个您当前正在使用的代码示例？
与 ngx-bootstrap Accordion 的主要示例完全相同的代码：valor-software.com/ngx-bootstrap/#/accordion#examples

标签： css angular twitter-bootstrap ngx-bootstrap ngx-bootstrap-accordion

【解决方案1】：

你基本上可以在 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;
}

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

【讨论】：

你能给我一个图标的具体例子吗？目前我正在使用fontawesome.com/how-to-use/on-the-web/using-with/angular
stackoverflow.com/questions/46297828/…
更新，只需要包含你的字体真棒css
@candybeer 我已经包含了很棒的字体 css 但它不起作用：我只看到一个空矩形（而其他字体很棒的图标仍然有效）。

【解决方案2】：

您可以使用accordion-group 输入isOpen。

HTML

<accordion-group [isOpen]="isContentOpen">
  <button class="btn btn-light float-right">
    <i *ngIf="isContentOpen" class="fas fa-caret-up">Open</i>
    <i *ngIf="!isContentOpen" class="fas fa-caret-down">Close</i>
  </button>
</accordion-group>

isContentOpen: boolean = false;

我推荐安装https://fontawesome.com/

【讨论】：

我希望它这么简单，但是 1) 在手风琴组关闭时隐藏按钮，2) 按下按钮或切换面板时变量不会更新通过其他方式（例如单击标题本身），因此按钮字形不会保持同步。
尽管如果你使用这里展示的accordion-heading 指令valor-software.com/ngx-bootstrap/#/accordion（例如<button ... accordion-heading>），除此之外所有需要的是在<accordion-group (isOpenChange)="isContentOpen = !isContentOpen"> 期间更新变量。

【解决方案3】：

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

<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>

【讨论】：

【解决方案4】：

以下答案适用于ngx-bootstrap@5.x.x。也解决了人们想要使用不同于 FontAwesome 的问题：

<!-- Please note that the #accordionGroupRef is scoped! -->
<accordion-group
    *ngFor="let number of [1,2,3,4];"
    [isOpen]="false"
    #accordionGroupRef
>

    <!-- Header -->
    <h5 class="m-0" accordion-heading>
        {{ accordionGroupRef.isOpen ? "OPEN" : "CLOSED"}}
        I am accordion {{number}}
        <span class="float-right"> I float all the way on the right!</span>
    </h5>    

    <!-- Content -->
    Accordion content
</accordion-group>

【讨论】：

您如何确定#accordionGroupRef 的范围？
无论何时使用<ng-template> 或像*ngIf 或*ngFor 这样的结构指令，它都会创建一个新的模板范围和模板引用变量：writesomecode.in/Angular/…