我正在使用primeng数据网格用于角度4，在网格中我有18列，现在有最多50行可以一次看到分页。我的要求是每页显示100行和150行，但是超过50行，网格会出现严重的性能问题，例如渲染大约需要30秒，并且需要10秒才能使用，数据从服务器加载，从服务器收到的数据非常快。有没有其他人遇到过问题。如果是的话，你怎么能修复它。
HTML
<p-dataTable #dt [value]="autoProcessGridData" [(selection)]="selectedRows" [(rows)]="rowsCountPerPage" [lazy]="true" (onLazyLoad)="loadData($event,false,'')"
[(totalRecords)]="totalRecords" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[10, 25, 50]"
[sortField]="fields.TIMEINPROCESSING.field" sortOrder="1" sortOrder="1" scrollable="true" [scrollHeight]="viewHeight">
<p-column *ngFor="let col of cols; let i = index" [field]="col.field" [header]="col.header" [(hidden)]="col.hidden" [styleClass]="col.class" [style]="{'display' : (col.hidden?'none':'')}" selectionMode="{{col.header==fields.BULKACTIONS.header ? 'multiple': ''}}"
[sortable]="col.sortable">
<ng-template *ngIf="col.header==fields.TIMEINPROCESSING.header" let-row="rowData" pTemplate="body">
<span [ngClass]="getClass(row[fields.TIMEINPROCCODE.field])">{{row[fields.TIMEINPROCESSING.field]}}</span>
</ng-template>
<ng-template *ngIf="col.header==fields.ACTIONS.header" let-row="rowData" pTemplate="body">
<span class="glyphicon glyphicon-arrow-right iconstyle {{isEnabled(row, 'sendtomanual')? 'sendtomanual' : 'disabled-icon'}}" (click)="openSingleRowTaskModel(row, 'SENDTOMANUAL')" title="Send To Manual"></span>
<span class="fa fa-refresh iconstyle {{isEnabled(row, 'requeue')? 'requeue' : 'disabled-icon'}}" (click)="openSingleRowTaskModel(row,'REQUEUE')" title="Requeue File"></span>
<span class="fa fa-close iconstyle {{isEnabled(row, 'reject')? 'reject' : 'disabled-icon'}}" (click)="openSingleRowTaskModel(row,'REJECT')" title="Reject File"></span>
</ng-template>
<ng-template *ngIf="col.field==fields.INDEX.field" let-row="rowData" pTemplate="body">
<span title="{{row[fields.INDEX.field]}}">{{row[fields.INDEX.field]}}</span>
</ng-template>
<ng-template *ngIf="col.header==fields.BULKACTIONS.header" pTemplate="header">
<span [popover]="myPopoverAuto" popoverPlacement="auto bottom" class="fa fa-cog cog-icon pull-right" title="View Bulk Action"></span>
<span style="width:80%">{{col.header}}</span>
<popover-content #myPopoverAuto placement="right" [closeOnClickOutside]="true">
<h3>Bulk Action</h3>
<p>
{{selectedRows.length ? selectedRows.length : 0}} items selected
</p>
<ul>
<li>
<span (click)="myPopoverAuto.hide(); openBulkTaskModel('SENDTOMANUAL')"><em class="glyphicon glyphicon-arrow-right iconstyle sendtomanual"></em> Send To Manual</span>
</li>
<li>
<span (click)="myPopoverAuto.hide(); openBulkTaskModel('REQUEUE')"><em class="fa fa-refresh iconstyle requeue"></em> Requeue Files</span>
</li>
<li>
<span (click)="myPopoverAuto.hide(); openBulkTaskModel('REJECT')"><em class="fa fa-close iconstyle reject"></em> Reject to Client</span>
</li>
</ul>
</popover-content>
</ng-template>
<ng-template *ngIf="col.header==fields.DATACENTER.header" pTemplate="header" let-col>
<span>{{col.header}}</span>
<p-dropdown [(ngModel)]="defaultDataCenter" [options]="dataCentreDd" [style]="{'width':'100%'}" (onChange)="filterByField($event, col.field, fieldType.DD);"
styleClass="ui-column-filter"></p-dropdown>
</ng-template>
<ng-template *ngIf="col.filter==true" pTemplate="header">
<span>{{col.header}}
<span *ngIf="isDisabled(i) && col.dualFilter==true" title="Clear Filter" class="clearFunnel fa fa-close" (click)="enableTextFilter(i, col.field)"></span>
<em *ngIf="col.dualFilter==true" class="fa fa-filter" aria-hidden="true" (click)="getFilterOnClick($event,col.field,i)"></em>
<p-multiSelectFilter *ngIf="col.dualFilter==true"
[options]="funnelFilterOptions"
[value]=customfilterValues[col.field]
(onApply)="applyFunnelFilter($event)"
(onSelfClick)="onSelfClickFunnel($event)"
[field]="col.field"
[filterTitle]="col.header">
</p-multiSelectFilter>
</span>
<input [(ngModel)]="filters[i]" type="text" size="30" pInputText (keyup)="filterByField($event, col.field, fieldType.TEXT, i)"
(focus)="old[i]=filters[i]; doManualScroll(col.field)" (blur)="changeEvent(old[i], filters[i], col.field)"
class="{{'input-'+col.field}}" [attr.disabled]="isDisabled(i) ? true : null" />
</ng-template>
<ng-template *ngIf="col.header==fields.PROCESSEDBYFIRSTNAME.header" let-row="rowData" pTemplate="body">
<span *ngIf="row[fields.PROCESSEDBYFIRSTNAME.field] != null">{{row[fields.PROCESSEDBYFIRSTNAME.field]}} {{row[fields.PROCESSEDBYLASTNAME.field]}}</span>
<span *ngIf="row[fields.PROCESSEDBYFIRSTNAME.field] == null">N/A</span>
</ng-template>
<ng-template *ngIf="col.header==fields.UPLOADEDBYFIRSTNAME.header" let-row="rowData" pTemplate="body">
<span *ngIf="row[fields.UPLOADEDBYFIRSTNAME.field] != null">{{row[fields.UPLOADEDBYFIRSTNAME.field]}} {{row[fields.UPLOADEDBYLASTNAME.field]}}</span>
<span *ngIf="row[fields.UPLOADEDBYFIRSTNAME.field] == null">N/A</span>
</ng-template>
<ng-template *ngIf="col.header==fields.LASTACTION.header" let-row="rowData" pTemplate="body">
<span *ngIf="row[fields.LASTACTION.field] != null">{{row[fields.LASTACTION.field]}}</span>
<span *ngIf="row[fields.LASTACTION.field] == null">N/A</span>
</ng-template>
<ng-template *ngIf="col.header==fields.LASTACTIONDATE.header" let-row="rowData" pTemplate="body">
<span *ngIf="row[fields.LASTACTIONDATE.field] != null">{{localDate(row[fields.LASTACTIONDATE.field])}}</span>
<span *ngIf="row[fields.LASTACTIONDATE.field] == null">N/A</span>
</ng-template>
<ng-template *ngIf="col.header==fields.PROJECT.header" let-row="rowData" pTemplate="body">
<span><a class="reject" (click)="openProjectModel(row)">{{row[fields.PROJECT.field]}} </a> </span>
</ng-template>
</p-column>
</p-dataTable>