2017-11-28 1 views
0

Ich habe eine dynamisch aufgebaute FormArray, die durch den folgenden Code generiert wird.Angular: Dynamisch generierte FormArray mit einer großen Anzahl von FormGroups als Mitglieder macht die Seite nicht mehr reagierend

this.priceListForm.addControl('priceListLines', this.formBuilder.array(this.priceListDetails.priceListLines.map(item => this.buildPriceListItem(item.listLinesId, item.prn, item.price, item.currencyCode, item.startDateActive, item.endDateActive)), dateConflictsValidator)); 

priceListDetails.priceListLines ist ein Array von JSON-Objekte und ich Abbilden sie FormGroup s buildPriceListItem mit sein.

buildPriceListItem(listLinesId, prn, price, currencyCode, startDateActive, endDateActive): FormGroup { 
return this.formBuilder.group({ 
    listLinesId: listLinesId, 
    prn: [prn, Validators.required], 
    price: [price, Validators.required], 
    currencyCode: [currencyCode, Validators.required], 
    startDateActive: [startDateActive, Validators.required], 
    endDateActive: [endDateActive, Validators.required] 
    }, { validator: startAndEndDateValidator }); 
} 

Wie Sie sehen können, habe ich eine FormGroup Ebene Validator sowie eine FormArray Ebene Validator.

Dieser große Prozess, der für das gesamte FormArray, macht der Browser nicht reagierenden ‚Mapping‘ ein Array (großer Größe) von Objekten in JSON FormArray von FormGroup s und Lauf Validierer für jede generierte FormGroup und komplexe Validierung beinhaltet.

Die Dinge funktionieren gut, wenn der Datensatz klein ist.

Bitte helfen Sie mir mit einem Workaround dafür.

+0

Haben Sie versucht, die Validatoren zu deaktivieren? – c69

+0

@ c69 Ich möchte die Validatoren. Selbst wenn ich die Validatoren entferne, wird die Zeit, in der die Seite nicht mehr reagiert, reduziert. – karthikaruna

+0

Ok .. wenn Sie sagen, dass die Seite auch ohne Validatoren langsam ist - wie viele Elemente insgesamt? Welchen Code verwendest du, um innere formGroups zu generieren? Der, den du gezeigt hast - sieht unschuldig aus. – c69

Antwort

0

Wenn Sie nicht alle Daten dem Benutzer anzeigen müssen oder alle gleichzeitig verarbeiten müssen: Beschränken Sie die Daten und laden Sie sie in Chunks. Vielleicht mit einem Filter (Backend/Frontend).

Wenn dies nicht ausreicht oder keine Lösung ist, können Sie dies als Prozess in einem Webworker aufteilen, sodass Ihre UI reaktionsfähig ist.

+0

'Worker' scheint meine Lösung zu sein, da ich das Array aufgrund einiger Geschäftsbeschränkungen nicht paginieren möchte. Irgendwelche Einsichten zur Verwendung eines Arbeiters mit "Angular"? – karthikaruna

+0

Nur einige Blogposts lesen, scheint gut zu funktionieren: https://blog.angularindepth.com/angular-with-web-workers-step-by-step-dc11d5872135 –

Verwandte Themen