Barista: [Filtro rápido] La adición programada de [filtros] activos provoca ExpressionChangedAfterItHasBeenCheckedError y evita que el controlador active

Creado en 16 jul. 2020  ·  12Comentarios  ·  Fuente: dynatrace-oss/barista

Informe de error

Cuando se usa el componente DtQuickFilter y se pasa una matriz de filtros a la entrada [filtros], el componente no reacciona según lo requerido como lo hace DtFilterField.

Qué debería pasar

El componente DtQuickFilter debería reaccionar adecuadamente a los filtros pasados ​​a la entrada [filtros]. Entonces el evento (filterChanges) debería ser disparado.

Que pasa actualmente

El componente DtQuickFilter acepta los filtros pasados ​​a [filtros], pero no activa el controlador de eventos, y también la consola muestra un ExpressionChangedAfterItHasBeenCheckedError.

Manifestación

https://stackblitz.com/edit/github-mpgcfd?file=src%2Fquick-filter%2Fquick-filter-default-example%2Fquick-filter-default-example.ts

  1. Tenga en cuenta la matriz "fakeFilters" que se pasa a la entrada [filtros]
  2. Tenga en cuenta el registro de la consola en el método "handle (event)" que se adjunta al evento (filterChanges)
  3. Verifique la consola del navegador para ver que el evento nunca se disparó, aunque de hecho se agregaron filtros falsos a la barra de filtros
  4. Tenga en cuenta que la expresión ha cambiado de error en el registro del navegador

¡Gracias!
Arnaud

bug cannot reproduce has-pr

Todos 12 comentarios

Hola @areknow, gracias por proporcionar un ejemplo de reproducción y abrir el problema.
Supongo que el evento no se dispara es por diseño, dado que ya configuraste los filtros, sabes que cambiaron, por lo tanto, no disparamos eventos justo después de que se configuran las entradas. Solo disparamos eventos cuando el usuario interactuó con el componente. Pero podría estar equivocado en este caso @lukasholzer ,

Con respecto al error ExpressionChangedAfterChecked, definitivamente es algo que debemos verificar.

En este punto asumimos que esto es un problema cuando se ejecuta en viewEngine.
Intentamos reproducirlo en nuestras aplicaciones de desarrollo y demostración, y no lo logramos. No pudimos reproducir el problema fuera de stackblitz.

@areknow, ¿ puede confirmar que la aplicación en la que ha notado este problema se está ejecutando en viewEngine (sabemos que stackblitz está ejecutando viewEngine)?

@ ffriedl89 Seguro que tiene sentido, ¡gracias por la explicación sobre el controlador de eventos!

@gselltho Puedo confirmar que mi aplicación está usando viewEngine.

¡Gracias chicos!

@tomheller Acabo de habilitar Ivy en mi aplicación pero sigo viendo el error ExpressionChangedAfterChecked. ¿Quizás esté pasando algo más?

Otra actualización interesante: el error solo me está sucediendo localmente. Después de compilarlo en dev a través de nuestra canalización (jenkins), el error no es visible en dev env.

Localmente hice un npm ci completo pero sigo viendo el error. ¿Hay otra caché que deba borrarse?

¡Gracias!

@areknow, ¿puedes intentar crear la aplicación localmente con AOT? (Compilación anticipada). Puede habilitar esto configurando la propiedad aot en angular.json en verdadero o pasando --aot al comando ng serve ... .

Creo que este es un problema de compilación JIT (justo a tiempo), esa debería ser la razón por la que no lo ve en su entorno de desarrollo.

En general, desde la versión 9, debe usar AOT para la compilación:
https://angular.io/guide/aot-compiler#choosing -a-compiler

Para el registro, también hay una sincronización de llamadas programada para investigar este problema más a fondo. Gracias @areknow por configurar esto.

@areknow, ¿puedes intentar crear la aplicación localmente con AOT? (Compilación anticipada). Puede habilitar esto configurando la propiedad aot en angular.json en verdadero o pasando --aot al comando ng serve ... .

Creo que este es un problema de compilación JIT (justo a tiempo), esa debería ser la razón por la que no lo ve en su entorno de desarrollo.

En general, desde la versión 9, debe usar AOT para la compilación:
https://angular.io/guide/aot-compiler#choosing -a-compiler

@lukasholzer gracias por la respuesta!
Intenté agregar aot: true a la configuración de compilación de servicio en angular.json y también intenté agregar la bandera --aot al comando de servicio. Sigo viendo el error localmente 😅

Esto se está volviendo realmente extraño. También hemos intentado esto en nuestra aplicación de desarrollo con cada posible permutación de ivy: on|off y viewEngine: on|off , y todavía no pudimos reproducir el error. Pero podemos ver esto en stackblitz y estamos bastante desconcertados sobre por qué está sucediendo esto. Espero nuestra llamada @areknow. Quizás si juntamos nuestras cabezas, podamos averiguar qué está pasando aquí.

¡@tomheller suena bien!

@tomheller Pude reproducir el problema en un proyecto nuevo: https://github.com/areknow/barista-quick-filter-bug

Todavía feliz de encontrarnos a la hora planificada 👍

Gracias a @areknow pudimos rastrear la fuente del problema en la configuración que proporcionó. Desafortunadamente, todavía no podemos reproducirlo en ninguna de nuestras aplicaciones dentro del repositorio, lo cual es algo preocupante.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

bradking1329 picture bradking1329  ·  3Comentarios

lukasholzer picture lukasholzer  ·  8Comentarios

TannerGilbert picture TannerGilbert  ·  4Comentarios

schobocop picture schobocop  ·  13Comentarios

ffriedl89 picture ffriedl89  ·  11Comentarios