主页 / 问题 / 912301
Accepted
bruce
Asked:2020-11-27 22:55:22 +0000 UTC2020-11-27 22:55:22 +0000 UTC

如何将类绑定到手风琴 ngx 引导程序中的特定 ngFor 元素？

  • 772

我正在尝试将默认类更改为公共/私有引导手风琴（ngx 引导手风琴）。我的实现中的问题是我没有绑定到数组的每个元素对象，因此，当打开其中一个元素的手风琴时，每个人的 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;
 }
}
bootstrap

1 个回答

  1. Best Answer

    最快和最简单的选择是简单地将属性添加到数组中的对象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 }"
    • 2

相关问题