你好呀!
我需要使用 Angular 2+ 创建一个包含这么多记录的表。为此,我正在尝试虚拟滚动。尽管如此,我还是找不到任何处于工作状态的文档或样本。
请帮助我开始使用 Angular 2+ 虚拟滚动。
你好呀!
我需要使用 Angular 2+ 创建一个包含这么多记录的表。为此,我正在尝试虚拟滚动。尽管如此,我还是找不到任何处于工作状态的文档或样本。
请帮助我开始使用 Angular 2+ 虚拟滚动。
我强烈推荐ngx-virtual-scroller
它非常强大,可以轻松处理成千上万个复杂元素。我在我的开源视频中心应用程序中使用它来显示图像和视频库(自定义元素),允许用户更改列数。有关代码,请参见GitHub。
你可以试试ngx-ui-scroll。它提供*uiScroll
了可以直接在您的 App 组件模板中使用的结构指令。它目前(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