javascript - 项目在 ~10 秒后消失 [Angular2, *ngFor]

Question

我有一个简单的 Angular2 模板，如下所示:

<span *ngFor="let message of messages">
  {{ message.content }}
</span>

以及其背后对应的TS逻辑:

let a = new Map();
for(let i = 0; i < 100; i++) {
  a.set(i, { content: i.toString() });
}

this.messages = a.values();

我可以在 View 中看到包含 100 个项目的列表，但几秒钟后(5 到 15 秒)，它们就会消失，没有任何错误/警告。

为什么会发生这种情况？

Answer 1

实际上，您没有收到任何可见的更改，因为在 for 循环完成对 map 变量的迭代之前，您正在分配空(此时)将元素映射到messages变量。

可能的解决方案是添加一个 setTimeout 函数来等待循环完成。

setTimeout(() => {
  this.messages = a.values();
}, 200);

<强> Plunker link

注意:各位程序员，我们这里有一个小问题，a.values()函数怎么可能不等待循环结束呢？它的行为类似于异步调用...我能够使用 setTimeout 修复它，但从长远来看它并不有效。

有人知道为什么会这样吗？