使用ngFor多次渲染模板时如何提高性能?我有一种情况,我需要根据计数显示相同的模板.我正在使用* ngFor.模板加载正确,但我担心性能.因为我需要重复显示相同的内容几千次,然后加载模板后性能会很慢.我在这里做了一个plunker演示
http://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview.请增加formarray中表单组的数量,相差1000,然后系统将变慢或发生故障.
这就是我创建formarray的方式,
这就是我创建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