Mat Autocomplete在加载大量数据时太慢了。

Question

我在我的Angular项目中使用mat-autocomplete https://material.angular.io/components/autocomplete/api，但是当加载大量数据（25k条）时，性能会变差。搜索和自动完成建议的速度太慢了。如何提高这个组件的性能？

- venkatesh karthick

---

加载更少的数据...只加载必要的数据。如果你只需要一个名字，不要加载整个对象，如果你只需要以'a'开头的项目，也不要加载所有东西... - Glenn van Acker

你能否设置一个工作的StackBlitz示例（即使只有几个示例项）？你的问题太抽象了，很难想出一个合适的答案。通常情况下，你的服务器API应该关心索引、排序和缓存，并且仅向Angular客户端推送少量数据，而Angular客户端则需要关注防抖时间、仅必要的API HTTP调用等等。 - Jochen Haßfurter

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

组件.ts

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

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

- plmarcelo

Answer 2

如果自动完成中的数据很多，性能会受到影响，我使用*cdkVirtualFor取代了自动完成功能中的*ngFor来解决这个问题。

请参考以下引用。

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

- Tejaswi Kale

---

请考虑编辑您的答案，包括链接参考中适用的代码部分。可以搜索代码部分。 - JohnH

你的解决方案非常适合我的使用情况，谢谢。 - Jul6art

Answer 3

我建议您在自动完成时加载较少的数据。但是，如果您确实需要显示/搜索这么多项，则解决您的问题的方法是虚拟滚动。https://material.angular.io/cdk/scrolling/overview。这是因为过滤函数，取决于您正在使用的过滤函数，大部分时间都用于重绘。 或者，还有一个更简单的解决方案，但需要比虚拟滚动使用更多的资源。 https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878。

- Sándor Jankovics

---

谢谢你的回答兄弟。CDK虚拟滚动解决了我的问题。 - venkatesh karthick