使用angular2 * ngFor缓慢渲染模板
如何在使用ngFor多次渲染模板时提高性能？ 我有一种情况，我需要根据count显示相同的模板。我使用* ngFor来执行此操作。 模板加载正确，但我担心的性能。因为我需要反复显示相同的内容几千次，然后性能会减慢后模板加载。我做了一个plunker演示在这里http：// plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview。 请增加formarray中formgroups的数量，使其相差1000，那么系统会变慢或中断。 这是我如何创建formarray，
for(var i=0;i<100;i++){
let dummyFormGroup=this.fb.group({
'name':[''],
'place':['']
})
this.dummyFormArray.push(dummyFormGroup);
}
我使用ngFor像这样渲染formarray中的控件
<div *ngFor="let formgroup of dummyFormArray.controls" style="display:flex;flex-direction:row">
<p>
<label>Name:</label>
<input type="text" [formControl]="formgroup.controls['name']" />
</p>
<p>
<label>Place:</label>
<input type="text" [formControl]="formgroup.controls['place']" />
</p>
有人可以建议我一种方法，我可以提高性能，一旦模板加载？ 因为如果需要渲染数千条记录，我可以等待模板加载。但是，一旦模板准备就绪，我希望系统在这种情况下使用* ngFor快。 有人请帮我解决这个问题。 谢谢 ！
默认情况下，对树中每个组件的变化检测进行角度检查。
因此，例如，如果将键绑定到输入组件，事情会非常快速地混乱。
有关更改检测的更多信息，请访问：https：//stackoverflow.com/a/39802466/4299560
您还可以通过仅显示可见模板来提高性能。 比方说，你开始渲染10个模板，当你开始滚动（到页面的底部），你渲染更多。 Web浏览器需要一些时间来渲染所有的DOM元素。 “准时制”渲染比“一次全部渲染”更好。 所有数据仍将保留在内存中，确保排序或搜索特定模板。
链接地址: http://www.djcxy.com/p/93395.html