Angular 6中Ng-bootstrap Collapse组件独立切换实现方法咨询

你遇到的问题很典型——现在的代码里所有折叠组件都共享了同一个isCollapsed状态变量，所以点击任意一个按钮时，这个变量的变化会同时作用于所有绑定它的[ngbCollapse]指令，导致所有组件一起展开或折叠。

要实现独立切换，核心思路是给每个Collapse分配独立的状态变量，下面分两种场景给出解决方案：

一、固定数量的Collapse（比如你示例里的2个） #

这种情况直接给每个组件定义单独的状态变量即可：

1. 在组件类中添加独立状态变量 #

// 组件.ts文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // 为每个Collapse定义独立的状态变量
  isCollapsed1 = false;
  isCollapsed2 = false;
}

2. 修改模板代码，分别绑定对应变量 #

<div class="row">
  <div class="col-6">
    <button type="button" class="btn btn-outline-primary" 
            (click)="isCollapsed1 = !isCollapsed1" 
            [attr.aria-expanded]="!isCollapsed1" 
            aria-controls="collapseExample">
      Toggle
    </button>
    <div id="collapseExample" [ngbCollapse]="isCollapsed1">
      <div class="card">
        <div class="card-body">
          You can collapse this card by clicking Toggle
        </div>
      </div>
    </div>
  </div>
  <div class="col-6">
    <button type="button" class="btn btn-outline-primary" 
            (click)="isCollapsed2 = !isCollapsed2" 
            [attr.aria-expanded]="!isCollapsed2" 
            aria-controls="collapseExample2">
      Toggle
    </button>
    <div id="collapseExample2" [ngbCollapse]="isCollapsed2">
      <div class="card">
        <div class="card-body">
          You can collapse this card by clicking Toggle
        </div>
      </div>
    </div>
  </div>
</div>

二、动态生成/数量较多的Collapse #

如果你的Collapse是动态生成的（比如从数组循环渲染），或者数量很多，用数组来管理状态会更高效：

1. 组件类中定义状态数组 #

// 组件.ts文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // 数组的每个元素对应一个Collapse的状态，初始都为折叠状态（false）
  collapseStates: boolean[] = [false, false]; 
  // 如果是动态生成，可以根据数据源长度初始化，比如：
  // collapseStates = Array(this.yourData.length).fill(false);
}

2. 模板中通过索引绑定状态 #

<div class="row">
  <!-- 用*ngFor循环渲染，通过索引操作对应状态 -->
  <div class="col-6" *ngFor="let state of collapseStates; index as i">
    <button type="button" class="btn btn-outline-primary" 
            (click)="collapseStates[i] = !collapseStates[i]" 
            [attr.aria-expanded]="!collapseStates[i]" 
            aria-controls="collapseExample{{i+1}}">
      Toggle {{i+1}}
    </button>
    <div id="collapseExample{{i+1}}" [ngbCollapse]="collapseStates[i]">
      <div class="card">
        <div class="card-body">
          You can collapse this card by clicking Toggle {{i+1}}
        </div>
      </div>
    </div>
  </div>
</div>

这样不管你有多少个Collapse，都能独立控制它们的展开/折叠状态啦。

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