Question

我在Angular 2中做了一个项目，而且我遇到了一个让我的网页失去很多性能的问题。所以，我有一张桌子，每次我滚动（向上或向下）它都会一直调用我的一个功能。这是一个：

.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;
}

在我的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 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>

每次向上/向下滚动时，是否有任何建议让我的页面停止调用 entriesToShow（）？

感谢您的帮助。

编辑：删除了一些额外的代码

Answer 1

不要从模板中调用entriesToShow（）函数！它导致每个变化检测都调用该函数！相反，您应该将数据存储在组件中的变量中，并且ngFor应该遍历他。的 .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>

Angular 2性能问题（渲染）

1 个答案: