我有一个表显示这么多行,我想优化它的性能.我通过使用虚拟滚动技术找到了解决方案.下面是一个Angular Material CDK Vritual Scroll视口组件的示例,div我发现它很简单:

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
  <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
     <div class="state">{{state.name}}</div>
     <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

但是,我想将它与Angular Material Table集成,如下所示

<table mat-table [dataSource]="dataSource">
    <ng-container  *ngFor="let c of displayedColumns" [matColumnDef]="c">
      <th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
      <td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

我不知道如何来包装cdk-virtual-scroll-viewport到mat-table.我的表最多显示1000行和20多列,并且在加载和滚动时性能非常慢.

PS:我知道它可以通过使用Paginator解决,但我不想那样做.

版本

1. "@angular/material": "^6.2.0"
2. @angular/cdk": "^6.2.0"
3. @angular/cdk-experimental": "^6.2.1"
4. "@angular/core": "6.0.3"
5. "@angular/cli": …