angular中 插值表达式里调用方法会不停触发方法

angular中 插值表达式里调用方法会不停触发方法

<div>{{getConsole()}}</div>

getConsole() {
  console.log('123');
}

• 控制面板上会打印多次123，页面上任何的操作性行为（鼠标移动、点击…）都会继续触发这个函数的执行。

• 原因：angular的脏数据检查机制（具体的原因：后面补充）

项目中为什么会在插值表达式中调用方：

1. 插值表达式中的值依赖于数组循环中的每一个item的值
2. 插值表达式中对每一个item进行判断和复杂的包装然后再显示到页面上

• 解决办法1：在ts中对数组先进行包装，在使用包装后的数组进行循环（数据很复杂的时候反而不好对数组进行包装）
• 解决办法2：使用管道，在管道中对每一项item进行包装