Estoy usando mat autocompletar https://material.angular.io/components/autocomplete/api en mi proyecto angular. mientras carga datos grandes con 25k artículos. el rendimiento es bajo. es demasiado lento para buscar y sugerir autocompletar. ¿Cómo aumentar el rendimiento de esto?
Estaba en la misma situación y mi solución fue limitar la lista a los primeros N resultados. Así que el código se ve así:
componente.html
<mat-autocomplete #auto="matAutocomplete" [displayWith]="name"> <mat-option *ngFor="let item of filteredItems" [value]="item"> {{item.name}} </mat-option> </mat-autocomplete>componente.ts
this.filteredItems = this.items.filter(...some.filtering here...).slice(0, 10);Filtrará todos los artículos, pero mostrará solo los primeros 10 que coincidan. ;-)
Si los datos son enormes en autocompletar, entonces el rendimiento es bajo, he resuelto el mismo problema usando * cdkVirtualFor reemplaza * ngFor dentro de autocompletar.
encuentre las referencias a continuación.
Recomendaría cargar menos datos a su autocompletar. Pero si realmente necesita mostrar/buscar tantos elementos. La solución a su problema es el desplazamiento virtual. https://material.angular.io/cdk/scrolling/overview Debido a que la función de filtro, dependiendo de la función de filtro que esté usando la mayor parte del tiempo, se usa al volver a pintarla. O una solución más simple pero que usa un poco más de recursos que el desplazamiento virtual. https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878