我目前正在研究一个角度组件来渲染和修改发票 . 要编辑lineitems我正在使用FormGroup与行项目FormArray表单:
lineItemForm: FormGroup = this.formBuilder.group({
lineItems: this.formBuilder.array([])
});
当通过 @Input 将线条项目设置到组件时,将为每个lineitem创建 FormGroup .
set lineItems(lineItems: InvoiceLineItem[]) {
this.lineItemForm.controls['lineItems'] = this.formBuilder.array(
lineItems.map(lineItem => {
return this.createLineItemForm(lineItem);
})
);
this._lineItems = lineItems;
}
private createLineItemForm(lineItem: InvoiceLineItem): FormGroup {
return this.formBuilder.group({
_id: [lineItem._id],
number: [lineItem.number],
amount: [lineItem.amount, Validators.compose([Validators.required, NumberValidator.validateNumber(2)])],
title: [lineItem.title],
netprice: [lineItem.netprice, Validators.compose([Validators.required, PriceValidator.validatePrice()])],
netpriceTotal: [lineItem.netpriceTotal, Validators.compose([Validators.required, PriceValidator.validatePrice()])],
grosspriceTotal: [lineItem.grosspriceTotal],
taxrate: [lineItem.taxrate, Validators.compose([Validators.required, IntegerValidator.validateInteger()])],
taxTotal: [lineItem.taxTotal],
from: [lineItem.from, DateValidator.validateDate('DD.MM.YYYY HH:mm')],
to: [lineItem.to, DateValidator.validateDate('DD.MM.YYYY HH:mm')],
pageIndex: [],
rowOrder: []
});
}
The template code looks like this (simplified):
<div formArrayName="lineItems"
*ngFor="let lineItem of lineItemForm.controls['lineItems'].controls; trackBy:getLineItemIdentity; let i = index; let even = odd">
<div *ngFor="let column of alwaysVisibleColumns; trackBy:getColumnIdentity; let col = index; let f = first; let l = last;"
[formGroupName]="i">
<div [formControlName]="column.field" some-custom-directives...></div>
</div>
</div>
我知道我使用div作为 formControls (具有自定义指令以将它们用作内容可编辑的输入)
当有<10个lineitems时,没有任何问题 . 不幸的是,当发票上有30-40个lineitems时,渲染过程会阻止大约10秒(!!!!!!) - 这绝对是荒谬的 .
我很确定问题是关于单个formControls的渲染 . 当我删除它们并只显示纯文本时,它会渲染得更快 .
那么我可以做任何改进的方法,或者我必须等到有远见的团队改进它吗?或者它永远不会用于我的场景,我必须弄清楚其他一些解决方案?
这是firefox dev-tools创建的性能测量链接 .
1 回答
经过几个小时的调查和调试后,我得出结论,性能问题来自多个指令的组合 .
FormControl本身不对我遇到的延迟负责 . 相反,我发现对渲染器(2)的调用使得事情变得非常缓慢 . 与其他一些或多或少的繁重计算配对导致了这种行为 . 我只是没想到像“.addClass”这样的东西在渲染时会花费大约400毫秒 .