ng-select - 大数据集加载缓慢

Question

我正在使用Angular 5 版本 1.4.2 的ng-select库。我有一个包含大约 700 条记录的大型数据集。我选择的下拉列表中的数据看起来不错，但仅在几秒钟后才出现。有没有办法让它更快地出现？

我研究过虚拟滚动。这是一个选择吗？我还需要能够进行搜索，在https://ng-select.github.io/ng-select#/virtual-scroll的演示中，我不确定这是否有效。

这是我的选择框的 HTML：

<ng-select [items]="clients| async | orderBy : ['name']"
           [closeOnSelect]="true"
           [searchable]="true"
           bindValue="id.clientID"
           bindLabel="name"
           placeholder="Select a Client..."
           notFoundText=""
           [(ngModel)]="selectedClient"
           name="client">
</ng-select>

这是我的 Angular 组件代码，它在初始化时加载此数据：

ngOnInit() {
    this.clients = this.clientService.getClients();
}

客户定义为

clients: Observable<Client[]>;

Answer 1

ng-select当包含数千（甚至更多）项目时，虚拟滚动肯定有助于缓解性能问题。

用法如下

<ng-select 
  [items]="yourItems"
  ...
  [virtualScroll]="true">
</ng-select>

填充列表的速度也可能会变慢clients。测量该负载需要多长时间。如果花费的时间太长，最好只加载第一个记录块，当用户滚动到末尾时加载下一个记录块。使用(scrollToEnd)事件来检测用户滚动到末尾。

在这种情况下，您需要实现动态搜索。示例可以在https://stackblitz.com/run?file=src%2Fsearch-autocomplete-example.component.html上找到