Angular 2+的虚拟滚动

Question

你好！

我需要使用 Angular 2+ 创建一个包含许多记录的表格。为此，我正在尝试虚拟滚动。但是，我找不到任何可用的文档或样例。

请帮助我开始使用 Angular 2+ 虚拟滚动。

- Navaneethan

---

尝试使用angular2-infinite-scroll。 - Habeeb

不行，我无法在DOM中处理那么多的记录。如果我使用无限滚动，每当我向下滚动时，DOM元素都会增加。这就是为什么我选择虚拟滚动的原因。 - Navaneethan

https://github.com/rintoj/angular2-virtual-scroll - Habeeb

我已经尝试过这个。但它并没有运行。 - Navaneethan

请查看这个基于Observable的实现：https://github.com/dinony/od-virtualscroll还有许多示例！ - dinony

Answer 1

我强烈推荐使用 ngx-virtual-scroller。它非常健壮，可以处理成千上万个复杂元素而不出问题。我在我的开源视频中心应用中使用它来展示图像和视频（自定义元素）的画廊，并允许用户更改列数。请参见GitHub获取代码。

- Boris Yakubchik

Answer 2

你可以尝试使用ngx-ui-scroll。它提供了*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对象。

- dhilt

Answer 3

你应该看一下 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

- Piero

---

实际上，我在尝试在AngularJs-2中实现虚拟重复。但是上面的例子是针对AngularJs的。 - Navaneethan

我刚刚意识到了，抱歉。我也有同样的事情要做，但仍然无法让angular2-virtual-scroll正常工作。 - Piero