Angular中ngModel触发get属性重复调用问题咨询

这个问题其实和Angular的变更检测机制直接相关，尤其是开发模式下的特殊行为，我来帮你拆解清楚：

为什么所有条目的name getter都会被调用两次？ #

1. 默认变更检测的全局扫描：Angular默认使用Default变更检测策略，当任何用户事件（比如你点击复选框）触发时，它会从根组件开始遍历整个组件树，检查所有绑定的表达式是否发生变化。你的*ngFor列表里每个条目的{{armor.name}}都是一个绑定表达式，所以变更检测运行时，每个条目都会调用一次get name()。
2. 开发模式的双重校验：为了捕捉变更检测过程中可能出现的副作用（比如getter里不小心修改了组件状态，导致无限循环），Angular在开发模式下会自动运行两次变更检测——第一次正常检测，第二次验证检测结果是否稳定。你的例子里有3个条目，3×2=6次，正好对应控制台的6次“test”输出。

怎么解决这个问题？ #

根据你的需求，有几种实用的优化方案：

方案1：切换到OnPush变更检测策略（推荐）

这是Angular性能优化的常用手段，它会让组件只在以下场景触发变更检测：

• 组件的@Input属性引用发生变化
• 组件内部触发了事件（点击、订阅回调等）
• 手动调用变更检测

操作步骤：

1. 在组件装饰器中导入并设置策略：

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
  // ...你的业务代码
}

2. 确保armorList是不可变数据：更新条目时不要直接修改数组元素，而是生成新数组（用map或扩展运算符），让Angular能检测到引用变化。比如修改obtained状态：

toggleArmorObtained(armor: Armor) {
  this.armorList = this.armorList.map(item => 
    item === armor ? {...item, obtained: !item.obtained} : item
  );
}

这样点击复选框时，只有被修改的条目会重新渲染，其他条目的name getter不会被调用。

方案2：提前计算name值，替换getter

如果name的计算逻辑不依赖实时变化的状态，可以在数据初始化时把name作为普通属性赋值给每个armor对象，避免每次变更检测都执行计算逻辑：

// 假设你的原始数据是rawArmorData
this.armorList = rawArmorData.map(armor => ({
  ...armor,
  name: this.getArmorName(armor) // 提前计算好name值
}));

// 原来的getter改成普通方法
getArmorName(armor: Armor): string {
  console.log("test");
  return "test";
}

此时{{armor.name}}绑定的是普通属性，变更检测时不会重复触发计算。

方案3：生产模式下运行（仅规避现象）

如果只是开发模式下的调试输出困扰你，生产模式下Angular会关闭双重变更检测，此时点击复选框每个条目只会调用一次name getter（总共3次）。但这只是隐藏了现象，没有从根本上优化性能。

内容的提问来源于stack exchange，提问作者Leonardo de Jesus