*ngFor 循环中令人困惑的 Angular 行为

Answer 1

每次将函数写入 .html 中的插值时，Angular 都应该每次执行以了解“某些内容是否已更改”。

当你使用变量时，Angular 会将变量的值与旧值进行比较，但如果你使用函数，Angular 应该执行该函数来获取实际值。

您可以尽量减少使用 ChangeDetectionStrategy.OnPush（这有更多含义，使用前务必了解）。

如果你写一个简单的，就会发生平等

{{getValue()}}

getValue()
{
   return "hello word"
}

总的来说，这就是当我们有循环时我们应该避免使用 .html 中的函数的原因。如果是数组，你可以写一些像

this.fieldsExtends=this.fields.map(x=>({...x,value:this.getValue(x)}))

并且您可以迭代 fieldExtends

<!--NOTE: in .html remove the "this", the only variables that you can show
    are the public variables of your component-->

<div *ngFor="let field of fieldsExtends" >
  <div class="block">{{ field.title }} : field.value}</div>
</div>

Answer 2

1. 更改检测在开发服务器中运行两次，所以也许这就是 10 变成 20 的原因。

2. 在视图初始化之前运行更改检测，这可能是前 10 条记录的属性！

3. 此更改检测后再次运行，以便剩余 10 条记录的属性

4. 当您向数组中添加一行时，每个数组元素内的数据有可能已更改，因此每个 get 方法都会运行更改检测！

代码

ngDoCheck
main.ts:37 getValue: 0 test
main.ts:37 getValue: 1 test
main.ts:37 getValue: 2 test
main.ts:37 getValue: 3 test
main.ts:37 getValue: 4 test
main.ts:42 ngAfterViewInit
main.ts:37 getValue: 5 test
main.ts:37 getValue: 6 test
main.ts:37 getValue: 7 test
main.ts:37 getValue: 8 test
main.ts:37 getValue: 9 test
chunk-7ESZLVZO.js?v=76da9c7e:19762 Angular is running in development mode.
main.ts:50 ngDoCheck
main.ts:37 getValue: 10 test
main.ts:37 getValue: 11 test
main.ts:37 getValue: 12 test
main.ts:37 getValue: 13 test
main.ts:37 getValue: 14 test
main.ts:37 getValue: 15 test
main.ts:37 getValue: 16 test
main.ts:37 getValue: 17 test
main.ts:37 getValue: 18 test
main.ts:37 getValue: 19 test

堆栈闪电战

如果你问是否有更好的方法，是的，信号可以用来弥补这个问题，你可以使用

computed

来执行复杂的计算，这些计算只有在根信号发生变化时才会被验证，因此它的控制更细粒度需要更改检测来运行更少的次数，从而提高性能

这是我对信号和变化检测的理解，请持保留态度:)