Добавление значка Chevron в аккордеон ngx-bootsrap

У меня проблема с изменением шеврона с ВВЕРХ на ВНИЗ при нажатии на аккордеон. Кажется, всегда получается true, независимо от того, какой трюк я пробовал и даже пробовал другие примеры, подобные этому https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app%2Fapp.component.html

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

angular accordion ngx-bootstrap
person Andrew Rutazamba    schedule 13.02.2018    source источник
comment
Предоставленный вами stackblitz отлично работает.   -  person Bunyamin Coskuner    schedule 14.02.2018
comment
Ваш пример stackblitz отлично работает.   -  person Gregor Doroschenko    schedule 14.02.2018

Ответы (2)


arrow_upward
2
arrow_downward

Я не уверен, что это лучшее решение, но оно работает для меня:

   <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.panels._results[i].isOpen. Также добавьте в component.ts:

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

arrow_upward
2
arrow_downward

этот работает:

  <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>
person Wei    schedule 14.11.2019
comment
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и/или как этот код отвечает на вопрос, повышает его ценность в долгосрочной перспективе. - person xiawi; 14.11.2019