0

Estoy haciendo una aplicación en angular 8 y todo funciona bien, hago ng build --prod para compilar la app en producción y posteriormente subir los cambios a un servidor, la aplicación funciona perfecto al menos cuando carga mas o menos 300 registros de un tabla, uso "material-angular" para hacer dicha tarea, adjunto el enlace de la tabla que ocupo para mostrar en la app. https://material.angular.io/components/table/overview

El problema se da cuando esta misma tabla le intento carga mucho mas datos, me carga los datos, me lo presenta en la tabla pero se pone lenta la aplicación a veces cuesta que detecte un click y se congela a veces. introducir la descripción de la imagen aquí

Ahora esta misma pantalla pero cargandole mas de 2000 registro. introducir la descripción de la imagen aquí

y es aqui cuando la aplicacion se vuelve demasiada lenta y a veces se congela y no reacciona a nada, hasta volver a recargar la pagina.

RESUMEN IMPORTANTE

  • se da con tablas o lista u otros componentes de material-angular a la cual se le carga muchos datos.
  • esos mensajes de adevertencias solo aparecen cuando intento cargar muchos datos.
  • al cargar estos datos no me generar ningun tipo de error, solo esas adevertecnias antes mostrada en la imagen

la consulta de los datos es la siguiente.

this.restService.obtenerDataRaw(event, fechaInicial, fechaFinal) ).subscribe((data) => {
      console.log(data);

      this.dataSource.data.push(...data);
      this.dataSource.data = this.dataSource.data;

  }, (err) => {
      console.log(err);
});

por el momento no se ni por donde empezar a solucionar este problema, no se si serán esas advertencia que me muestra, (las advertencia crecen exponencial mente) cada ves que nuevo el mouse o doy click en la app

2
  • 1
    Hola, porque haces this.dataSource.data.push(...data) y luego ` this.dataSource.data = this.dataSource.data;`? tantas veces modificar el datasouce va redibujar mas veces de las necesarias la tabla. En cuanto a la performance, lo mejor es que agregues un paginado (esta funcionalidad ya viene incorporada en el componente) el 2 dic. 2019 a las 14:32
  • Hola, lo hago para actualizar la tabla en el componente, de lo contrario no me muestra información en la tabla, como es la primera forma que me funcionó al cargar datos de esa forma lo estado usando, no se si hay otra forma mas optima de mostrar los datos obtenido de una api. el 2 dic. 2019 a las 15:48

1 respuesta 1

0

Angular-Material tiene una forma de optimizar la presentación de datos en listas, tablas o componentes que hagan que la aplicación pueda saturarse de datos. Esta es la documentación oficial: https://material.angular.io/cdk/scrolling/overview

Tendrías que cambiar el for que estas haciendo por cdkFor y agregar las etiquetas

<cdk-virtual-scroll-viewport [itemSize]= 10></cdk-virtual-scroll-viewport>

al inicio y al final de tu tabla.

itemSize te dice cuantos datos vas a mostrar y a medida de que vayas bajando se van cargando los siguientes 10 datos.

Mejorara mucho el rendimiento de tu tabla

Revisa la documentación y me cuentas como te va.

Te dejo un tutorial practico para mas información aquí Revisa el minuto: 2:02:04 Un saludo

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.