为什么ngx-datatable的性能会很慢？

Question

我已经用大约创建了一个简单的数据表。20列50行，如下所示：

<ngx-datatable
    class="bootstrap"
    [rows]="filteredlist"
    [reorderable]="reorderable"
    [headerHeight]="50"
    [rowHeight]="38"
    [selectionType]="'single'"
    [scrollbarV]="true"
    [scrollbarH]="true"
    style="max-height: 60vh"
>
    <ngx-datatable-column name="#" width="50">
        <ng-template let-rowIndex="rowIndex" let-row="row" ngx-datatable-cell-template>
            {{ rowIndex + 1}}
        </ng-template>
    </ngx-datatable-column>
    ...

</ngx-datatable>

我现在想知道的是缓慢的性能。当我水平滚动时，标题会延迟移动。此外，当我使用一些[frozenLeft]="true"时，它会闪烁很多。

我的表是否有问题，或者是否有任何可用的性能提示？

Answer 1

尝试在您的表组件上设置"OnPush“更改检测：

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})