通过@angular/cdk-experimental 在 Angular Material 2 表中使用虚拟滚动 [英] Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental
问题描述
我有一个表显示这么多行,我想优化它的性能.我通过使用虚拟滚动技术找到了一个解决方案.下面是一个 Angular Material CDK 虚拟滚动视口组件 用一个简单的 div
我发现:
<div *cdkVirtualFor="let state of statesObservable | async;"class="list-group-item"><div class="state">{{state.name}}</div><div class="capital">{{state.capital}}</div>
</cdk-virtual-scroll-viewport>
但是,我想将它与 Angular Material Table 集成,如下所示
<ng-container *ngFor="let c of shownColumns" [matColumnDef]="c"><th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th><td mat-cell style="white-space: pre-wrap;"*matCellDef="let 元素">{{元素[c]}}</td></ng-容器><tr mat-header-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>
我想知道如何将 cdk-virtual-scroll-viewport
包装到 mat-table
.我的表格最多显示 1000 行和 20 多列,并且在加载和滚动时性能很慢.
PS:我知道可以通过使用 Paginator 来解决,但我不想那样做.
版本
"@angular/material": "^6.2.0"
@angular/cdk": "^6.2.0"
@angular/cdk-experimental": "^6.2.1"
"@angular/core": "6.0.3"
"@angular/cli": "6.0.7"
尚不支持.但是有些人已经尝试做一些 POC.这是一个 https://github.com/angular/material2/issues/10122#issuecomment-440442656 .
也在这个 issue 中讨论了虚拟滚动以及上述 POC有效.
I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div
I've found:
<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>
However, I want to integrate it with Angular Material Table like below
<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>
I was wondering how to wrap that cdk-virtual-scroll-viewport
to mat-table
. My table displays up to 1000 rows and more than 20 columns, and the performance is pretty slow while it's loading and scrolling.
PS: I know that it can be solved by using Paginator, but I don't want to do that.
Versions
"@angular/material": "^6.2.0"
@angular/cdk": "^6.2.0"
@angular/cdk-experimental": "^6.2.1"
"@angular/core": "6.0.3"
"@angular/cli": "6.0.7"
It's not supported yet. But some people have tried to do some POC's. Here is one https://github.com/angular/material2/issues/10122#issuecomment-440442656 .
Also in this issue there is discussion about virtual scrolling and how the above POC works.
这篇关于通过@angular/cdk-experimental 在 Angular Material 2 表中使用虚拟滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!