在Angular Material 2表中使用虚拟滚动,使用@ angular/cdk-experimental

Question

我有一个表显示这么多行,我想优化它的性能.我通过使用虚拟滚动技术找到了解决方案.下面是一个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": "6.0.7"

Answer 1

这不是现成的东西。的CdkTable（或MatTable）组件不支持虚拟滚动YET。

引入的虚拟滚动支持@angular/cdk仍处于试验阶段-这将在版本7中更改。

但是，当此功能启动时，下一步将是在表中实现它……我将解释原因。

cdk-virtual-scroll-viewport是该*cdkVirtualFor指令的容器，如果我们查看该指令（CdkVirtualForOf），我们可以看到

1）实现 CollectionViewer（代码）2）接受（与）DataSource实例（代码）一起工作

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

1）实现 CollectionViewer（代码）2）接受（与）DataSource实例（代码）一起工作

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

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

如果我不得不猜测，我会说开发人员将选择是否要用虚拟滚动包装表格。这是因为cdk-virtual-scroll-viewport不查询cdkVirtualFor（via ViewChild），它是被动的，正在等待附加它的信息...这表明这是预想的...

您现在可以通过CdkTable自己扩展和进行调整来完成此操作，这将需要了解表的内部结构，并且可能需要一些时间。我建议稍等。

Answer 2

尚不支持。但有些人尝试做一些 POC。这是一个https://github.com/angular/material2/issues/10122#issuecomment-440442656。

本期还讨论了虚拟滚动以及上述 POC 的工作原理。