Angular 2性能问题（渲染） [英] Angular 2 performance issue (rendering)

问题描述

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

I'm doing a project in Angular 2 and I'm getting an issue that makes my pages lose a lot of performance. So, I have a table and everytime I scroll (up or down) it keeps calling one of my functions. This is the one:

.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中，我得到了这样的结果：

And in my html I got something like this:

<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（）的任何建议上/下？

Any advice to make my page stop calling entriesToShow() everytime I scroll up/down?

感谢您的帮助。

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

Removed some extra code

推荐答案

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

Don't call the entriesToShow() function from your template! It cause's the function to be called every change detection! Instead you should store the data in a variable in your component and the ngFor should iterate over him. .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性能问题（渲染）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！