我对Angular中这个循环的行为有点困惑:
对5个字段的数组进行简单的*ngFor
循环
<div *ngFor="let field of this.fields" >
<div class="block">{{ field.title }} : {{getValue(field)}}</div>
</div>
功能getValue
是
getValue(field) {
console.log("getValue: "+ this._counter++, field.title);
return field.name;
}
鉴于数组只有5个字段,我预计函数getValue
只执行5次(或数组中的项目数),但正如您从this fiddle中看到的那样,它在第一次运行时执行了20次,并且状态的任何变化都会使它多运行10次.(从控制台阅读)
事实上,当页面加载时,只有1个项的数组将运行4次,并且任何状态变化都会导致它运行两次.
这在具有数百数组和运行以获取数据的复杂函数的适当应用程序中变得更加明显.
这似乎对于Angular的所有版本都是一样的(至少我从v4-v16测试过的版本)
所以我很好奇.首先,为什么它执行这么多次,其次,鉴于有一个复杂的函数来返回数据,是否有更有效的方法来循环数组?