angular中 插值表达式里调用方法会不停触发方法
<div>{{getConsole()}}</div>
getConsole() {
console.log('123');
}
-
控制面板上会打印多次123,页面上任何的操作性行为(鼠标移动、点击…)都会继续触发这个函数的执行。
-
原因:angular的脏数据检查机制(具体的原因:后面补充)
项目中为什么会在插值表达式中调用方:
- 插值表达式中的值依赖于数组循环中的每一个item的值
- 插值表达式中对每一个item进行判断和复杂的包装然后再显示到页面上
- 解决办法1:在ts中对数组先进行包装,在使用包装后的数组进行循环(数据很复杂的时候反而不好对数组进行包装)
- 解决办法2:使用管道,在管道中对每一项item进行包装