我有一个表显示很多行，我想优化它的性能。我通过使用虚拟滚动技术找到了解决方案。这是一个例子Angular Material CDK 虚拟滚动视口组件 https://github.com/angular/material2/tree/master/src/cdk-experimental/scrolling用一个简单的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>

但是，我想将它与角材料表 https://material.angular.io/components/table/overview像下面这样

<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 to mat-table。我的表格最多显示 1000 行和 20 多列，加载和滚动时性能非常慢。

PS：我知道可以通过使用来解决分页器 https://material.angular.io/components/paginator/overview，但我不想那样做。

Versions

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": "6.0.7"

这不是目前现成的东西。这CdkTable (or MatTable) 组件不支持虚拟滚动YET.

虚拟滚动支持融入@angular/cdk仍处于实验阶段 - 这将在版本 7 中改变。

然而，当这个功能落地后，下一步将是在桌子上实现它。我会解释原因。

cdk-virtual-scroll-viewport是一个容器*cdkVirtualFor指令，如果我们研究这个指令（CdkVirtualForOf）我们可以看到

1. It 实施 CollectionViewer (code https://github.com/angular/material2/blob/6.4.x/src/cdk-experimental/scrolling/virtual-for-of.ts#L70-L72)

2. 它接受（与）DataSource实例 （code https://github.com/angular/material2/blob/6.4.x/src/cdk-experimental/scrolling/virtual-for-of.ts#L78-L90)

考虑到这一点，让我们看看CdkTable

1. It 实施 CollectionViewer (code https://github.com/angular/material2/blob/master/src/cdk/table/table.ts#L156)

2. 它接受（与）DataSource实例 （code https://github.com/angular/material2/blob/master/src/cdk/table/table.ts#L312-L319)

相似性并非偶然，该表（经过一些调整）可以被使用cdk-virtual-scroll-viewport像cdkVirtualFor用来。

我不确定最终的实现是什么，开发人员是否能够从外部包装表格，或者表格将在内部设置它，但这就是它的方向。

如果我不得不猜测，我会说开发人员会选择是否想用虚拟卷轴包裹桌子。这是因为cdk-virtual-scroll-viewport不查询cdkVirtualFor (via ViewChild），它是被动的，等待有东西附加它。这表明这是预先考虑好的。

您现在就可以通过扩展来做到这一点CdkTable并自己进行调整，这需要了解表的内部结构，并且可能需要一些时间。我建议稍等一下。