Angular 2

Question

你好！

我需要使用角度js 2创建一个包含如此多记录的表。为此，我尝试虚拟滚动。但是，我无法在工作状态下找到任何文档或样本。

请帮我开始使用angular 2虚拟滚动。

Answer 1

您可以尝试ngx-ui-scroll。它提供了*uiScroll结构指令，可以直接在App组件的模板中使用。它目前（v0.0.4）不支持表格布局，但如果你可以使用div-layout，它可能看起来像

<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>

然后，您需要根据demo page中的文档或代码示例实现Datasource对象。

Answer 2

您应该查看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

Answer 3

我强烈推荐ngx-virtual-scroller

它非常健壮，可以毫无问题地处理成千上万个复杂元素。我在开放源代码视频中心应用程序中使用它来显示图像和视频的库（自定义元素），允许用户更改列数。有关代码，请参见GitHub。