英文:

mat autocomplete is too slow while loading large data

问题

我在我的Angular项目中使用了mat-autocomplete（https://material.angular.io/components/autocomplete/api）。当加载包含25,000个项目的大量数据时，性能会下降。搜索和建议自动完成的速度太慢了。如何提高性能？

英文:

I am using mat autocomplete https://material.angular.io/components/autocomplete/api in my angular project. while loading large data with 25k items. the performance gets low. it is too slow to search and suggest autocomplete. how to increase the performance of this?

答案1

得分: 21

以下是翻译好的部分：

我曾经处于相同的情况，我的解决方案是限制列表只显示前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(...一些筛选操作...).slice(0, 10);

你将对所有项目进行筛选，但只显示前10个匹配项。;-)

<details>
<summary>英文:</summary>

I was in the same situation and my solution was to limit the list to first N results. So the code looks like this:

**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);

You will be filtering all items, but showing only first 10 matching. ;-)

</details>



# 答案2
**得分**: 5

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

请查看以下参考链接。

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

<details>
<summary>英文:</summary>

If data is huge in autocomplete then performance low, I have resolved the same issue using *cdkVirtualFor replaces *ngFor inside autocomplete.

please find references below.

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

</details>



# 答案3
**得分**: 4

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

<details>
<summary>英文:</summary>

I would recommend to load less data to your autocomplete . But if you really need to display/search this many items. The solution to your problem is virtual scroll.https://material.angular.io/cdk/scrolling/overview
Because the filter function  depending on the filter function you are using  the most time is used by repainting it.
Or a simpler solution but uses a bit more resource than virtual scroll .
https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878

</details>