html - Angular 2+ 的虚拟滚动

Question

您好!

我需要使用 Angular 2+ 创建一个包含如此多记录的表。为此，我正在尝试虚拟滚动。尽管如此，我还是找不到任何处于工作状态的文档或样本。

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

Answer 1

你可以试试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>

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