7

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

4

3 回答 3

13

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

组件.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 个匹配项。;-)

于 2020-09-02T16:50:40.767 回答
3

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

于 2020-01-04T20:10:54.477 回答
3

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

请在下面找到参考。

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

于 2021-05-13T10:11:03.080 回答