加载大数据时mat自动完成太慢答案

【问题标题】：mat autocomplete is too slow while loading large data加载大数据时mat自动完成太慢
【发布时间】：2020-04-21 23:59:55
【问题描述】：

我在我的 Angular 项目中使用 mat autocomplete https://material.angular.io/components/autocomplete/api。在加载包含 25k 个项目的大数据时。性能变低。搜索和建议自动完成太慢了。如何提高这个性能？

【问题讨论】：

加载更少的数据......并且只加载必要的数据。如果您只需要一个名称，请不要加载整个对象，如果您只需要以“a”或其他内容开头的项目，请不要加载所有内容......
你能建立一个有效的 stackblitz 示例（即使只有十几个示例项）？您的问题远非抽象，无法考虑适当的答案。通常，您的服务器 api 应该关心索引、排序和缓存，并且只向 Angular 客户端推送少量数据，而 Angular 客户端又必须关心 debounceTime、只有必要的 api http 调用等等。

标签： html angular autocomplete mat-autocomplete

【解决方案1】：

我遇到了同样的情况，我的解决方案是将列表限制为前 N 个结果。所以代码看起来像这样：

component.html

<mat-autocomplete #auto="matAutocomplete" [displayWith]="name">
    <mat-option *ngFor="let item of filteredItems" [value]="item">
        {{item.name}}
    </mat-option>
</mat-autocomplete>

component.ts

this.filteredItems = this.items.filter(...some.filtering here...).slice(0, 10);

您将过滤所有项目，但仅显示前 10 个匹配项。 ;-)

【讨论】：

【解决方案2】：

我建议将更少的数据加载到您的 autocomplete 中。但是如果你真的需要显示/搜索这么多项目。您的问题的解决方案是虚拟滚动。https://material.angular.io/cdk/scrolling/overview 因为过滤器功能取决于您使用最多的过滤器功能，是通过重新绘制来使用的。或者一个更简单的解决方案，但使用比虚拟滚动更多的资源。 https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878

【讨论】：

谢谢你的回答兄弟。 cdk virtual scroll 解决了我的问题。

【解决方案3】：

如果自动完成中的数据量很大，那么性能就会降低，我已经解决了同样的问题，使用 *cdkVirtualFor 替换了自动完成中的 *ngFor。

请在下面找到参考资料。

https://stackblitz.com/edit/autocomplete-with-virtual-scroll?file=app%2Fcdk-virtual-scroll-overview-example.ts

【讨论】：

考虑编辑您的答案以包含链接参考中的适用代码部分。可以搜索代码段。