Angular中如何为动态生成div的ngClass绑定独立布尔变量？

你不需要手动声明variable1/variable2这类零散的独立变量，这种写法维护成本极高，也不符合Angular数据驱动的开发思路。要实现每个动态生成的div独立控制、互不影响，核心是让每个列表项和专属状态做一一绑定，以下是两种可直接落地的实现：

方案1：重构为带状态属性的对象数组（最推荐，符合最佳实践） #

直接把原纯字符串的列表数组，改造成「存储展示值+存储控制状态」的对象数组，状态和列表项强绑定，增删列表项时不需要额外调整状态逻辑。

TypeScript 代码 #

// 组件内定义
numbers: { value: string; isBoxShow: boolean }[] = [
  { value: '0', isBoxShow: true },
  { value: '1', isBoxShow: true },
  { value: '2', isBoxShow: false },
  { value: '3', isBoxShow: true },
  { value: '4', isBoxShow: false },
  { value: '5', isBoxShow: true }
];

// 切换单个项状态的方法
toggleItem(item: { value: string; isBoxShow: boolean }) {
  item.isBoxShow = !item.isBoxShow;
}

模板代码 #

<div *ngFor="let n of numbers">
  <div 
    [ngClass]="n.isBoxShow ? 'box' : 'hide'"
    (click)="toggleItem(n)"
  >
    {{n.value}}
  </div>
</div>

方案2：独立维护索引对齐的状态数组（适配原数组不可修改的场景） #

如果业务要求不能修改原numbers字符串数组的结构，可以单独创建一个和原数组长度、索引完全对应的状态数组，通过*ngFor提供的索引值绑定对应状态。

TypeScript 代码 #

numbers: string[] = ['0', '1', '2', '3', '4', '5'];
// 状态数组索引和numbers索引一一对应，默认所有项显示
boxShowStatus: boolean[] = new Array(this.numbers.length).fill(true);

// 按索引切换状态
toggleByIndex(index: number) {
  this.boxShowStatus[index] = !this.boxShowStatus[index];
}

模板代码 #

<div *ngFor="let n of numbers; let i = index">
  <div 
    [ngClass]="boxShowStatus[i] ? 'box' : 'hide'"
    (click)="toggleByIndex(i)"
  >
    {{n}}
  </div>
</div>

两种方案都能实现单div状态切换不影响其他元素的效果，状态完全独立，全程使用Angular原生语法实现，不需要引入jQuery或操作原生DOM。

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