加载大数据时 mat 自动完成速度太慢

Question

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

Answer 1

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

Answer 2

我遇到了同样的情况，我的解决方案是将列表限制为前 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 个匹配项目。 ;-)

Answer 3

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

请在下方查找参考资料。

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

加载大数据时 mat 自动完成速度太慢

mat autocomplete is too slow while loading large data

html

autocomplete

angular

mat-autocomplete