1

Я пытаюсь менять дефолтные классы на открытый/ закрытый аккордеон бутстрапа (ngx bootstrap Accordion). Проблема в моей реализации заключается в том, что я не привязываюсь к каждым элементам-объектам моего массива, из-за чего, при открытии аккордеона одного из элементов, css класс меняется для всех.

<div *ngFor="let item of data">
 <accordion>
  <accordion-group [panelClass]="{'active':isOpen, 'passive':!isOpen}" (isOpenChange)="isOpenChange($event)">
   <span accordion-heading class="accordion-header">
    {{item.title}}
   </span>
   <div>{{item.description}} </div>
  </accordion-group>
 </accordion>
</div>

@Component({...})
Class CustomAccrodion {
isOpen: boolean = false;
 data = [
  { title: 'first', description: 'first text' },
  { title: 'second', description: 'first text' },
  { title: 'third', description: 'first text' },
 ];
 ...
 isOpenChange(open: boolean) {
  this.isOpen = open;
 }
}

1 ответ 1

2

Самый быстрый и простой вариант - просто добавлять свойство объекту из массива data.

В шаблоне в метод isOpenChange будем передавать item:

(isOpenChange)="isOpenChange(item)"

В самом методе сделаем следующее:

public isOpenChange(item: any): void {
    // изначально свойства `isOpen` нету, поэтому `!undefined => true`
    item.isOpen = !item.isOpen;
}

Также немного изменим биндинг свойства:

[panelClass]="{ active: item.isOpen, passive: !item.isOpen }"
1
  • Спасибо вам! Я хотел добавить свойство массиву data, но запутался с тем, как бы это сделать.
    – bruce
    27 ноя 2018 в 16:12

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.