Я пытаюсь менять дефолтные классы на открытый/ закрытый аккордеон бутстрапа (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;
}
}