2017-04-04 123 views
0

我有一个简单Angular2模板,看起来像这样:项目后消失到10秒[Angular2,* ngFor]

<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(); 

我可以看到我的视图中有100个项目的列表,但几秒钟后(从5秒到15秒),它们消失而没有任何错误/警告。

这是怎么发生的?

+0

Plunker或任何其他工作,例如最小的将是有益的。 –

+0

@Kinduser我创建了一个plunkr,但它似乎并没有在所有的工作。我不确定这个错误是否会立即发生,或者我做错了什么:https://plnkr.co/edit/US3uPVe4jVfElGNkOXCx?p=preview – alexandernst

回答

0

事实上,因为for循环迭代结束在map变量之前,你的messages变量分配空(在那一刻)map元素,您没有收到任何明显的变化。

可能的解决方案添加setTimeout功能等的循环来完成。

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

Plunker link

注意:各位程序员,我们有一个小问题在这里,怎么可能是a.values()函数不等待循环结束?它表现得像一个asynchro呼叫......我能与setTimeout修复它,但它不是有效的在更长期的。

任何人有任何想法,为什么它的工作原理这样?

+0

好的,这解决了PLUNK问题,但它不会触发我的最初的问题。为什么数据可能会消失?我怎么能调试它的根本原因? – alexandernst

+0

@alexandernst老实说,在plunker中的这个问题值得一个单独的问题,因为在'for'循环结束之前调用'.values()'函数是可能的吗?这很奇怪,这个问题需要比我更聪明的人。关于你的问题 - 这很难判断它为什么会消失,value()函数对我来说似乎是可疑的。 –

+1

是的,我也这么想。也许'values()'正在创建一些Chrome的GC在几秒钟后删除的时间迭代器,因为它无法正确检测到Angular仍在使用它? – alexandernst