使用angular2*ngFor缓慢渲染模板

Question

如何使用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快速.有人请帮我解决这个问题.谢谢 !

Answer 1

默认情况下，角度检查树中每个组件的变化检测。

因此，例如，如果您将键绑定到您的输入组件，事情会很快变得混乱。

有关此处更改检测的更多信息：https : //stackoverflow.com/a/39802466/4299560