Angular 4中如何为ngb-accordion动态ID的对应div设置类名

你这个问题核心是用了全局状态变量控制类名，导致所有面板同步变化啦～只要给每个面板单独维护展开状态就能搞定，下面是具体的解决步骤：

第一步：给每个列表项添加独立的展开状态 #

在你的组件类里，给store.items的每个item新增一个isExpanded属性（默认设为false，也就是初始收起状态）：

// 组件.ts文件
ngOnInit() {
  // 给每个item绑定独立的展开状态
  this.store.items.forEach(item => {
    item.isExpanded = false;
  });
}

第二步：修改panelChange事件处理逻辑 #

把原来的toggleAccordian方法改成只更新当前点击面板对应的item状态，不再操作全局变量：

toggleAccordian(event: NgbPanelChangeEvent) {
  // 通过面板ID找到对应的item（这里假设你的panel id是用item的唯一标识生成的，比如item.id）
  const targetItem = this.store.items.find(item => `stati-${item.id}` === event.panelId);
  if (targetItem) {
    // event.nextState就是面板即将切换到的状态，直接赋值给item的属性
    targetItem.isExpanded = event.nextState;
  }
}

第三步：绑定类名到当前item的状态 #

在模板里，把原来绑定全局className的地方，改成根据当前item的isExpanded动态切换类名：

<ngb-accordion [closeOthers]="true" (panelChange)="toggleAccordian($event)">
  <div *ngFor="let item of store.items">
    <ngb-panel [id]="'stati-' + item.id"> <!-- 确保panel ID和item唯一关联 -->
      <ng-template ngbPanelTitle>
        <!-- 这里根据item的展开状态切换类名，比如展开用"expanded-style"，收起用"collapsed-style" -->
        <div [class.expanded-style]="item.isExpanded" [class.collapsed-style]="!item.isExpanded">
          {{ item.title }} <!-- 你的面板标题内容 -->
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        <!-- 面板内容区域 -->
        {{ item.content }}
      </ng-template>
    </ngb-panel>
  </div>
</ngb-accordion>

原理说明 #

之前用全局变量时，所有面板共享同一个状态值，所以一点击全变。现在每个面板对应的item都有自己的isExpanded属性，点击某个面板只会更新对应item的状态，自然只有当前面板的类名会变化啦～

如果你的store.items是从后端接口获取的，记得在数据加载完成后再执行添加isExpanded属性的逻辑哦！

内容的提问来源于stack exchange，提问作者Anele Ngqandu