如何在单页中使用多个ng-bootstrap collapse组件并实现独立折叠？

问题根源是你所有Collapse组件共用了同一个状态变量，导致点击时会同时修改所有组件的折叠状态。解决核心是给每个Collapse组件维护独立的状态：

方案1：动态列表场景（推荐） #

如果是循环生成的多个折叠项，用对象或数组存储每个项的状态：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-multi-collapse',
  templateUrl: './multi-collapse.component.html'
})
export class MultiCollapseComponent {
  // 模拟折叠项数据，实际可从接口获取
  collapseItems = [
    { id: 'item1', title: '折叠项1', content: '这是折叠项1的详情内容' },
    { id: 'item2', title: '折叠项2', content: '这是折叠项2的详情内容' },
    { id: 'item3', title: '折叠项3', content: '这是折叠项3的详情内容' }
  ];

  // 用项的唯一ID作为键，存储对应折叠状态
  collapseStates: { [key: string]: boolean } = {};

  constructor() {
    // 初始化所有项为展开状态（false = 不折叠）
    this.collapseItems.forEach(item => {
      this.collapseStates[item.id] = false;
    });
  }

  // 仅切换当前点击项的状态
  toggleCollapse(itemId: string) {
    this.collapseStates[itemId] = !this.collapseStates[itemId];
  }
}

模板代码 #

<div *ngFor="let item of collapseItems" class="mb-3">
  <button class="btn btn-outline-primary" (click)="toggleCollapse(item.id)">
    {{ item.title }} {{ collapseStates[item.id] ? '展开' : '折叠' }}
  </button>
  <div [ngbCollapse]="collapseStates[item.id]">
    <div class="card mt-2">
      <div class="card-body">
        {{ item.content }}
      </div>
    </div>
  </div>
</div>

方案2：静态固定数量场景 #

如果是固定的几个折叠项，直接为每个项定义独立的状态变量：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-static-collapse',
  templateUrl: './static-collapse.component.html'
})
export class StaticCollapseComponent {
  isCollapsed1 = false;
  isCollapsed2 = false;
  isCollapsed3 = false;
}

模板代码 #

<!-- 第一个折叠项 -->
<div class="mb-3">
  <button class="btn btn-outline-primary" (click)="isCollapsed1 = !isCollapsed1">
    折叠项1 {{ isCollapsed1 ? '展开' : '折叠' }}
  </button>
  <div [ngbCollapse]="isCollapsed1">
    <div class="card mt-2">
      <div class="card-body">折叠项1内容</div>
    </div>
  </div>
</div>

<!-- 第二个折叠项 -->
<div class="mb-3">
  <button class="btn btn-outline-primary" (click)="isCollapsed2 = !isCollapsed2">
    折叠项2 {{ isCollapsed2 ? '展开' : '折叠' }}
  </button>
  <div [ngbCollapse]="isCollapsed2">
    <div class="card mt-2">
      <div class="card-body">折叠项2内容</div>
    </div>
  </div>
</div>

两种方案的核心都是让每个Collapse组件绑定独立的状态变量，点击时仅修改当前项的状态，避免全局变量导致的联动问题。

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