2

我试图了解*ngForAngular 的指令在幕后是如何工作的。我想知道的是，传递给指令的可迭代对象是否在每次循环迭代时被解释（如 JSfor循环的条件），或者 angular 是否创建了一个具有该值的“缓存”类变量。为了回答这个问题，我做了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 只是在每次迭代时调用该方法。但这对我来说开始变得复杂......

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

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

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

dataArr = [1,2];

并且繁荣仍然是4次迭代......

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

谢谢

4

2 回答 2

4

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

你没有看到迭代。每次渲染 DOM 时，Angular 都会调用该方法。它与数组中有多少元素无关。碰巧你看到它数到 4。

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

每个渲染通道执行一次上述操作。该*ngFor指令将表达式分解为两个变量。对当前迭代器的引用，以及对源迭代器的引用。

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

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

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

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

于 2018-12-21T14:59:52.360 回答
0

这里有更多关于迭代器是什么的内容。数组是一个迭代器，但它是隐式的、自动的，你看不到它。你计算的不是这个东西被迭代了多少次，而是你的函数被调用了多少次。

如果您想跟踪您已经进行了多少次迭代，您必须构建一个自定义迭代器。迭代器需要返回一个next()方法，该方法被调用的次数与您要返回的值一样多。你从这里返回的next()是一个带有{ value, done }签名的对象——当你完成时，不管是value什么，done都是真的。您可以在next其中计算迭代次数。

这是您的代码旁边的示例。

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

于 2018-12-21T15:55:26.430 回答