Angular 将V形图标添加到ngx bootsrap手风琴

单击手风琴时，我无法从上到下更改V形。无论我尝试了什么技巧，甚至尝试了其他类似的例子，结果似乎总是正确的

基本信息

我不确定这是否是一个最好的解决方案，但它对我有效：

   <ngb-accordion #accordion [closeOthers]="true" >
    <ngb-panel *ngFor="let round of data, let i=index">
      <ng-template ngbPanelTitle>
        <div class="d-flex flex-row justify-content-between" style="width: 100%">
          <div class="p-2">
            {{round.title}}
          </div>
          <div class="p-2">
            <span [ngClass]="{'icon-arrow-up': accordion.panels._results[i].isOpen, 'icon-arrow-down': !accordion.panels._results[i].isOpen}"></span>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        {{round.info}}
      </ng-template>
    </ngb-panel>
  </ngb-accordion>

这一个有效：

  <accordion>
      <accordion-group #group1 [isOpen]='true'>
        <div accordion-heading class="clearfix">
        Basic Information
          <span class="badge badge-secondary float-right pull-right">
            <i class="fa" [ngClass]="{'fa-chevron-up': group1.isOpen, 'fa-chevron-down': !group1.isOpen}"></i>
          </span>
        </div>
  </accordion>

基本信息

您提供的stackblitz效果很好。您的stackblitz示例效果很好。虽然此代码可以回答问题，但提供有关此代码为什么和/或如何回答问题的其他上下文可以提高其长期价值。

   import { AccordionComponent } from 'ngx-bootstrap';
   ...
   @ViewChild('accordion') accordion: AccordionComponent;

  <accordion>
      <accordion-group #group1 [isOpen]='true'>
        <div accordion-heading class="clearfix">
        Basic Information
          <span class="badge badge-secondary float-right pull-right">
            <i class="fa" [ngClass]="{'fa-chevron-up': group1.isOpen, 'fa-chevron-down': !group1.isOpen}"></i>
          </span>
        </div>
  </accordion>