问角7 FormArray渲染性能

EN

lineItemForm: FormGroup = this.formBuilder.group({
    lineItems: this.formBuilder.array([])
});

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: []
    });
}

<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>