Langsames Rendering der Vorlage mit angular2 * ngFor

Wie kann ich die Leistung beim mehrfachen Rendern einer Vorlage mit ngFor erhöhen? Ich habe eine Situation, wo ich die gleiche Schablone basierend auf der Zählung zeigen muss. Ich mache das mit * ngFor. Die Vorlage wird korrekt geladen, aber ich mache mir Sorgen um die Leistung. Da ich den gleichen Inhalt mehrmals für ein paar tausend Mal anzeigen muss, wird die Leistung langsam sein, nachdem die Vorlage geladen ist. Ich habe hier eine Demo-Demo gemacht http://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview. Bitte erhöhen Sie die Anzahl der Formulargruppen in Formarray mit einer Differenz von 1000, dann wird das System langsam oder bricht zusammen. Dies ist, wie ich die formarray erstellen,Langsames Rendering der Vorlage mit angular2 * ngFor

 for(var i=0;i<100;i++){ 
    let dummyFormGroup=this.fb.group({ 
    'name':[''], 
    'place':[''] 
    }) 
    this.dummyFormArray.push(dummyFormGroup); 
}

Und ich die Kontrollen in formarray machen wie diese

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

jemand mit ngFor Kann mir bitte einen Ansatz vorschlagen, wo ich die erhöhen Leistung, sobald die Vorlage geladen ist? Weil es okay ist, auf das Laden der Vorlage zu warten, wenn Tausende von Datensätzen gerendert werden müssen. Aber sobald die Vorlage fertig ist, möchte ich, dass das System in diesem Fall mit * ngFor schnell ist. Jemand bitte helfen Sie mir bei der Lösung dieses Problems. Danke!

Quelle

2016-10-01 abhilash reddy

können Sie klären, was meinst du mit langsam? Ist es Post oder Pre Render? – Ced

Sein langsam nach Post Renderer –

Und wenn die Vorlage fertig ist, Bearbeitung in den Eingabefeldern wird der Text langsam angezeigt.Dies ist ein Problem mit meiner Code Logik richtig? Ich meine, tut * ngFor irgendwelche Ereignisse im Hintergrund nach dem Laden der Vorlage ausgeführt werden? –

Standardmäßig wird die Änderungserkennung in jeder Komponente im Baum auf Winkel überprüft.

Also zum Beispiel, wenn Sie den Schlüssel an die Eingabe-Komponenten binden, werden die Dinge ziemlich schnell unordentlich werden.

Mehr über Änderungserkennung hier: https://stackoverflow.com/a/39802466/4299560

Quelle

2016-10-06 22:01:52 Ced

Sie könnten auch die Leistung verbessern, indem nur die sichtbaren Vorlagen machen. Angenommen, Sie beginnen mit dem Rendern von 10 Vorlagen, und wenn Sie mit dem Scrollen beginnen (am Ende der Seite), rendern Sie mehr. Der Webbrowser braucht einige Zeit, um alle DOM-Elemente zu rendern. Rendering "Just-in-Time" ist besser als "All-at-Once" Rendering. Alle Daten werden weiterhin im Speicher gespeichert, um sicherzustellen, dass die Sortierung oder die Suche nach bestimmten Vorlagen möglich ist.

Quelle

2017-10-12 08:39:03 John

Langsames Rendering der Vorlage mit angular2 * ngFor

Antwort

Verwandte Themen