Angular2+ ngFor 指令如何迭代 ref 可迭代对象？

Question

我试图了解 Angular 的 *ngFor 指令在幕后是如何工作的。我想知道的是，传递给指令的可迭代对象是否在每次循环迭代时被解释（如 JS for 循环的条件），或者 angular 是否创建了一个类似 "cache" 的变量具有该值。为了回答这个问题，我做了一个ngFor，它有一个方法返回一个数组作为可迭代对象。

<li *ngFor="let data of test(dataArr)">{{data}}</li>

相关TS :

 dataArr = [1,2,3,4];
 iterationNb = 1;
 test(arr) {
    console.log('has iterated', this.iterationNb++);
    return arr.filter(i => true);
 }

这是我在控制台中得到的：

has iterated 1
has iterated 2
has iterated 3
has iterated 4

如果您需要 angular 项目，这里是我用于试用的示例应用程序：https://stackblitz.com/edit/angular-3kmyyw

太好了，我看到 angular 只是在每次迭代时调用该方法。但这对我来说开始变得复杂了...

然后我尝试通过在其中添加一些其他值来更改该方法使用的 ref 数组 dataArr，例如：

dataArr = [1,2,3,4,5,6,7];

但现在我的控制台中还有 4 次迭代... 然后我尝试了

dataArr = [1,2];

并且 booom 仍然是 4 次迭代...

所以现在我对此很困惑... 为什么我总是有 4 次迭代？第一次尝试只是幸运地在我的数组中选择了 4 个项目，实际上这与它无关？我试图查看 angular ngfor 源代码，但我仍然不是那种不解释就理解它的忍者...

谢谢

Answer 1

That's great, I see that angular just call the method at each iteration. But that's where it starts to be complex for me...

您没有看到迭代。每次呈现 DOM 时，Angular 都会调用该方法。它与数组中有多少个元素无关。幸运的是你看到它数到 4。

<li *ngFor="let data of test(dataArr)">

以上每个渲染通道执行一次。 *ngFor 指令将表达式分解为两个变量。对 current 可迭代对象的引用，以及对源 iterator.

的引用

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators

ngFor 在每个渲染过程中只需要分配一次源 iterator。在您的表达式中， test() 函数 returns 迭代器（恰好是一个数组）。它将从迭代器中获取 next() 值并将其分配给将在模板中公开的 data 变量。

ngFor 将继续调用 next() 直到它到达迭代器的末尾。对于每次迭代，ngFor 检查是否存在应插入、更新或删除的 DOM 元素。它使用 trackBy 函数知道哪些数据与哪个 DOM 元素相关。

https://medium.com/@ramy_ali/improving-angular-ngfor-performance-through-trackby-ae4cf943b878

Answer 2

这里详细介绍什么是迭代器。数组是一个迭代器，但它是隐式的、自动的，你看不到它。你计算的不是这个东西被迭代了多少次，而是你的函数被调用了多少次。

如果您想跟踪有多少迭代，您必须构建一个自定义迭代器。迭代器需要 return 一个 next() 方法，该方法被调用的次数与 return 的值一样多。你从这个 next() 中 return 是一个带有 { value, done } 签名的对象 - value 是任何东西，当你完成时 done 是真的。在此 next 中，您可以计算迭代次数。

Here's 代码旁边的示例。

JavaScript 引擎的作用是使数组隐式迭代。

Angular2+ ngFor 指令如何迭代 ref 可迭代对象？

How does Angular2+ ngFor directive iterate over the ref iterable?

loops

ngfor

angular2-changedetection

angular