使用angular2 * ngFor缓慢渲染模板

前端之家收集整理的这篇文章主要介绍了使用angular2 * ngFor缓慢渲染模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用ngFor多次渲染模板时如何提高性能?我有一种情况,我需要根据计数显示相同的模板.我正在使用* ngFor.模板加载正确,但我担心性能.因为我需要重复显示相同的内容几千次,然后加载模板后性能会很慢.我在这里做了一个plunker演示 http://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview.请增加formarray中表单组的数量,相差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

猜你在找的Angularjs相关文章