Angular 2 Leistungsproblem (Rendering)

Question

Ich mache ein Projekt in Angular 2 und ich bekomme ein Problem, das meine Seiten eine Menge Leistung verlieren lässt. Also habe ich einen Tisch und jedes Mal, wenn ich scrolle (nach oben oder nach unten), ruft er eine meiner Funktionen an. Dies ist die eine:

.component.ts

entriesToShow(): Array<any>{ 
    let entries = []; 
    let i = 0; 
    if(Number(this.startingEntry)+Number(this.numOfEntries) <this.totalEntries) 
     this.lastShowingEntry = Number(this.startingEntry)+Number(this.numOfEntries); 
    else 
     this.lastShowingEntry = this.totalEntries; 

    if(this.dataTable != null && this.dataTable.aaData != null){ 
     for(i = this.startingEntry; i< this.lastShowingEntry; i++){ 
      entries.push(this.dataTable.aaData[i]); 
     } 
     this.lastShowingEntry = i; 
     return entries; 
    }else 
     return null; 
} 

Und in meinem html habe ich so etwas wie dieses:

<div class="col-md-12" *ngIf="isDataTableAvailable"> 
    <table id="table-EDIImports" class="table table-bordered display" cellspacing="0"> 
     <thead> 
       <tr> 
        <th><strong>{{ 'POINT_OF_SALE' | translate }}</strong></th> 

        (more fields) 

        <th *ngIf="mode=='EDIT'"></th> 
      </tr> 
      <tr *ngFor="let obj of entriesToShow()" [ngSwitch]="obj.Status"> 
        <th>{{ obj.PointOfSell }}</th> 
        <th *ngIf="obj.LineID == editRowId && selectedField == 'NIF' && mode=='EDIT'"> 
         <input type="text" [(ngModel)]="valueToSave" value="{{ obj.NIF }}"> 
        </th> 
         (more fields) 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
</div> 

Irgendwelche Tipps auf meiner Seite nicht mehr anrufen entriesToShow zu machen () jedes Mal, wenn ich nach oben/unten scrollen?

Danke für die Hilfe.

EDIT: Entfernt einige zusätzliche Code

Answer 1

nicht die entriesToShow() Funktion aus Ihrer Vorlage rufen Sie! Es bewirkt, dass die Funktion bei jeder Änderungserkennung aufgerufen wird! Stattdessen sollten Sie die Daten in einer Variablen in Ihrer Komponente speichern und die ngFor sollte über ihn iterieren. .component.ts

 entries:Array<any>; 

     ngOnInit(){ 
      this.entries=this.entriesToShow(); 
     } 
     entriesToShow(): Array<any>{ 
      let entries = []; 
      let i = 0; 
      if(Number(this.startingEntry)+Number(this.numOfEntries) <this.totalEntries) 
       this.lastShowingEntry = Number(this.startingEntry)+Number(this.numOfEntries); 
      else 
       this.lastShowingEntry = this.totalEntries; 

      if(this.dataTable != null && this.dataTable.aaData != null){ 
       for(i = this.startingEntry; i< this.lastShowingEntry; i++){ 
        entries.push(this.dataTable.aaData[i]); 
       } 
       this.lastShowingEntry = i; 
       return entries; 
      }else 
       return null; 
     } 

.html

<div class="col-md-12" *ngIf="isDataTableAvailable"> 
    <table id="table-EDIImports" class="table table-bordered display" cellspacing="0"> 
     <thead> 
       <tr> 
        <th><strong>{{ 'POINT_OF_SALE' | translate }}</strong></th> 

        (more fields) 

        <th *ngIf="mode=='EDIT'"></th> 
      </tr> 
      <tr *ngFor="let obj of entries" [ngSwitch]="obj.Status"> 
        <th>{{ obj.PointOfSell }}</th> 
        <th *ngIf="obj.LineID == editRowId && selectedField == 'NIF' && mode=='EDIT'"> 
         <input type="text" [(ngModel)]="valueToSave" value="{{ obj.NIF }}"> 
        </th> 
         (more fields) 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
</div>