ngFor循环中ngClass函数重复调用问题：如何仅触发点击元素的函数

兄弟，这个坑我踩过好多次了！本质是Angular的变更检测机制在搞事情，我给你捋清楚原因和解决办法：

为啥test1会被调用5次？ #

Angular的变更检测会在很多场景触发（比如按钮点击、数据更新、甚至浏览器事件），每次检测的时候，模板里所有绑定的表达式都会重新执行一遍。你在ngClass里写了test1()，那ngFor循环的每一个元素都会在变更检测时调用一次这个函数——这就是为啥它跑了5次。而按钮的click事件是只有点击那一刻才触发，所以test2只执行一次。

正确的姿势：用数据驱动代替函数调用 #

别在模板里直接调用函数来控制类，这是Angular的大忌！我们应该用状态管理的方式，让数据来决定类的添加：

1. 给循环的每个元素加一个状态属性（比如isActive），记录它是否需要应用目标类；
2. 点击按钮时，只更新当前被点击元素的状态；
3. ngClass直接根据这个状态值判断，不用调用函数。

直接上代码示例 #

HTML模板

<div *ngFor="let item of itemList; let i = index">
  <div [ngClass]="{'your-target-class': item.isActive}">{{ item.content }}</div>
  <button (click)="handleClick(i)">点击触发</button>
</div>

JS/TS代码

// 初始化你的列表数据，每个item带一个状态属性
itemList = [
  { content: '项1', isActive: false },
  { content: '项2', isActive: false },
  { content: '项3', isActive: false },
  { content: '项4', isActive: false },
  { content: '项5', isActive: false }
];

handleClick(index) {
  // 只修改被点击元素的状态
  this.itemList[index].isActive = !this.itemList[index].isActive;
  // 这里放原来test2的逻辑，正常只执行一次
}

为啥这个方法靠谱？ #

• 变更检测时，ngClass只是读取item.isActive的属性值，不会触发任何函数调用；
• 点击按钮时，我们只更新对应元素的状态，Angular只会更新这个元素的DOM，不会影响其他项；
• 逻辑清晰，性能也更好，完全符合Angular的最佳实践。

要是真的必须用函数呢？ #

如果有特殊情况非得用函数，那一定要保证它是纯函数（相同输入返回相同结果，没有任何副作用），并且可以给组件设置ChangeDetectionStrategy.OnPush来减少变更检测的频率，但这会增加组件的复杂度。还是更推荐上面的数据驱动方案，简单又靠谱。

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