你好!
我需要使用 Angular 2+ 创建一个包含许多记录的表格。为此,我正在尝试虚拟滚动。但是,我找不到任何可用的文档或样例。
请帮助我开始使用 Angular 2+ 虚拟滚动。
你好!
我需要使用 Angular 2+ 创建一个包含许多记录的表格。为此,我正在尝试虚拟滚动。但是,我找不到任何可用的文档或样例。
请帮助我开始使用 Angular 2+ 虚拟滚动。
*uiScroll
结构指令,可以直接在你的应用组件模板中使用。目前(v0.0.4)不支持表格布局,但如果你可以使用div布局,它可能看起来像这样。<div class="viewport">
<div *uiScroll="let item of datasource" class="row">
<div class="col1">{{item.data1}}</div>
<div class="col2">{{item.data2}}</div>
<div class="col3">{{item.data3}}</div>
</div>
</div>
然后,您需要按照文档或来自演示页面的代码示例实现Datasource
对象。
你应该看一下 Angular Material VirtualRepeat https://material.angularjs.org/latest/demo/virtualRepeat
md-virtual-repeat 指令提供了一个 md-on-demand 属性,它避免了将数组作为数据源提供程序的问题。
[编辑] 由于 Angular Material VirtualRepeat 尚未适用于 angular2,因此我对 rintoj/angular2-virtual-scroll 进行了一些更改,以从后端获取数据而不是从数组中获取。 它在 github 上 https://github.com/pnocera/ng2-vscroll