这是一个对我有用的解决方案
<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>
你基本上可以在 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;
}
只需使用您最喜欢的图标的字体系列来设置之前选择器的样式...
以下答案适用于
[email protected]
。还为想要使用与 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>
您可以使用
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>
TS
isContentOpen: boolean = false;