typescript 在带有@angular/cdk-experimental 的 Angular Material 2 表中使用虚拟滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50691281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental
提问by Seanghay
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 Componentwith a simple divI've found:
我有一个表显示这么多行，我想优化它的性能。我通过使用虚拟滚动技术找到了一个解决方案。这是Angular Material CDK 虚拟滚动视口组件的示例，其中包含一个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>
However, I want to integrate it with Angular Material Tablelike below
但是，我想将它与如下所示的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>
I was wondering how to wrap that cdk-virtual-scroll-viewportto 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.
我想知道如何将其包装cdk-virtual-scroll-viewport到mat-table. 我的表最多显示 1000 行和 20 多列，并且在加载和滚动时性能非常慢。
PS: I know that it can be solved by using Paginator, but I don't want to do that.
PS：我知道可以通过使用Paginator来解决，但我不想这样做。
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"
"@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"
采纳答案by piyush gupta
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.
尚不支持。但是有些人已经尝试做一些 POC。这是一个https://github.com/angular/material2/issues/10122#issuecomment-440442656。
Also in this issuethere is discussion about virtual scrolling and how the above POC works.
此外，在此问题有关于虚拟滚动以及如何上面的POC工作的讨论。
回答by Shlomi Assaf
This is not something that currently exists out of the box. The CdkTable(or MatTable) component does not support virtual scroll YET.
这不是目前开箱即用的东西。的CdkTable（或MatTable）组件不支持虚拟滚动YET。
The virtual scroll support baked into @angular/cdkis still in it's experimental phase - this will change in version 7.
虚拟滚动支持@angular/cdk仍处于试验阶段 - 这将在版本 7 中更改。
However, when this feature lands the next step will be to implement it for the table... and I will explain why.
但是，当此功能出现时，下一步将是为表格实现它……我将解释原因。
cdk-virtual-scroll-viewportis a container for the *cdkVirtualFordirective, if we look into this directive (CdkVirtualForOf) we can see that
cdk-virtual-scroll-viewport是*cdkVirtualFor指令的容器，如果我们查看这个指令 ( CdkVirtualForOf) 我们可以看到
1) It implementsCollectionViewer(code)
2) It accepts (works with) DataSourceinstance (code)
1）它实现CollectionViewer（代码）2）它接受（与）DataSource实例（代码）
With this in mind, let's look at the CdkTable
考虑到这一点，让我们看看 CdkTable
1) It implementsCollectionViewer(code)
2) It accepts (works with) DataSourceinstance (code)
1）它实现CollectionViewer（代码）2）它接受（与）DataSource实例（代码）
The similarity is not by chance, the table (with some adjustments) can be used by cdk-virtual-scroll-viewportlike the cdkVirtualForis used.
相似性不是偶然的，表格（经过一些调整）可以被cdk-virtual-scroll-viewport喜欢的人cdkVirtualFor使用。
I'm not sure what the final implementation will be, whether the developer will be able to wrap the table from the outside or the table will set it internally but this is the direction it will be.
我不确定最终的实现是什么，开发人员是否能够从外部包装表格，还是表格将在内部设置它，但这就是它的方向。
If I had to guess I would say that the dev will choose if he wants to wrap the table with a virtual scroll. This is because cdk-virtual-scroll-viewportdoes not query for cdkVirtualFor(via ViewChild), it is passive and waits for something to attach it... which is a sign that this was thought of pre-hand...
如果我不得不猜测，我会说开发人员会选择他是否想用虚拟卷轴包裹桌子。这是因为cdk-virtual-scroll-viewport不查询cdkVirtualFor(via ViewChild)，它是被动的并等待某些东西附加它......这表明这是预先想到的......
You can do it right now, by extending CdkTableand making the adjustments yourself, this will require an understanding of the table internals and might take some time. I suggest waiting a bit.
您现在可以通过CdkTable自己扩展和进行调整来完成，这需要了解表的内部结构，并且可能需要一些时间。我建议稍等一下。
回答by Diprokon
I made a custom directive, what can solve this problem:
我做了一个自定义指令，什么可以解决这个问题：
1) install a package: $ npm install -save ng-table-virtual-scrolland add it to imports:
1）安装一个包：$ npm install -save ng-table-virtual-scroll并将其添加到导入：
import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';
@NgModule({
imports: [
// ...
TableVirtualScrollModule
]
})
export class AppModule { }
2) use the custom DataSourcefrom the package:
2）使用DataSource包中的自定义：
import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';
@Component({...})
export class MyComponent {
dataSource = new TableVirtualScrollDataSource();
}
3) use the directive on viewport container:
3）在视口容器上使用指令：
<cdk-virtual-scroll-viewport tvsItemSize style="height: 400px;">
<table mat-table [dataSource]="dataSource">
...
</table>
</cdk-virtual-scroll-viewport>
The directive allows you to use all features of mat-table, such as sort, pagination, sticky header/column, etc
该指令允许您使用 的所有功能mat-table，例如排序、分页、粘性标题/列等
