Angular中ngFor循环绑定的trend模板函数为何总是被调用两次

问题相关代码 #

HTML模板 #

<ul>
  <li *ngFor="let exercise of exercises">
    Name: {{exercise.name}}<br>      
    Sets: {{exercise.sets}}<span [innerHTML]="trend(exercise.sets,exercise.prev_sets)"></span>
  </li>
</ul>

组件逻辑代码 #

trend(value: any, prev_value: any){
  console.log("Result:" + value);
  return "";
}

控制台运行结果 #

Result: 12  exercises.component.ts:39 
Result: 12  exercises.component.ts:39

现象原因 #

这个表现是Angular开发模式下的正常机制，和Angular的变更检测逻辑直接相关：

• Angular默认使用Default变更检测策略，开发环境下每次变更检测周期会执行两轮流程：第一轮为常规检测流程，负责求值所有模板绑定表达式、更新DOM内容，这一阶段会第一次调用绑定的trend函数；第二轮为开发模式专属的一致性校验流程，会重新求值所有模板表达式，校验第一轮检测完成后绑定值是否出现非预期的变动，避免出现数据和视图不同步的问题，这一阶段会第二次调用trend函数。
• 该重复调用仅在开发环境出现，生产环境构建部署后，变更检测只会执行单轮，不会出现单条数据触发两次函数调用的情况。

额外注意事项 #

• 不建议在模板绑定位置直接调用包含复杂逻辑的函数：Angular无法自动缓存函数返回值，只要触发变更检测（用户点击、接口返回、定时器执行等所有被Zone.js接管的异步操作都会触发），就会重新执行所有绑定的函数，和是否在*ngFor指令内无关，逻辑复杂时很容易引发性能问题。
• 对应优化方案：获取到exercises数组数据后，提前在组件类中计算好每个条目对应的trend展示结果，存为数组条目自身的属性，模板直接绑定该属性即可；也可以将趋势计算逻辑封装为纯管道（Pure Pipe），利用Angular对纯管道的返回值缓存机制减少不必要的重复计算。

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