Tengo un componente principal que recupera una matriz de objetos mediante una solicitud ajax.
Este componente tiene dos componentes secundarios: uno de ellos muestra los objetos en una estructura de árbol y el otro presenta su contenido en formato de tabla. El padre pasa la matriz a sus hijos a través de una propiedad @input y muestran el contenido correctamente. Todo como se esperaba.
El problema ocurre cuando cambia algún campo dentro de los objetos: los componentes secundarios no reciben notificación de esos cambios. Los cambios solo se activan si reasigna manualmente la matriz a su variable.
Estoy acostumbrado a trabajar con Knockout JS y necesito obtener un efecto similar al de observableArrays.
He leído algo sobre DoCheck pero no estoy seguro de cómo funciona.
OnChanges Lifecycle Hook se activará solo cuando cambie la instancia de la propiedad de entrada.
Si desea verificar si un elemento dentro de la matriz de entrada se agregó, movió o eliminó, puede usar IterableDiffers dentro del DoCheck Lifecycle Hook de la siguiente manera:
constructor(private iterableDiffers: IterableDiffers) { this.iterableDiffer = iterableDiffers.find([]).create(null); } ngDoCheck() { let changes = this.iterableDiffer.diff(this.inputArray); if (changes) { console.log('Changes detected!'); } }Si necesita detectar cambios en los objetos dentro de una matriz, deberá iterar a través de todos los elementos y aplicar KeyValueDiffers para cada elemento. (Puede hacer esto en paralelo con la verificación anterior).
Visite esta publicación para obtener más información: Detectar cambios en objetos dentro de una matriz en Angular2
Siempre puede crear una nueva referencia a la matriz fusionándola con una matriz vacía:
this.yourArray = [{...}, {...}, {...}]; this.yourArray[0].yourModifiedField = "whatever"; this.yourArray = [].concat(this.yourArray);El código anterior cambiará la referencia de la matriz y activará el mecanismo OnChanges en los componentes secundarios.
Lea el siguiente artículo, no se pierda los objetos mutables frente a los inmutables.
El problema clave es que muta los elementos de la matriz, mientras que la referencia de la matriz permanece igual. Y la detección de cambios de Angular2 verifica solo la referencia de matriz para detectar cambios. Después de comprender el concepto de objetos inmutables, comprenderá por qué tiene un problema y cómo resolverlo.
Uso redux store en uno de mis proyectos para evitar este tipo de problemas.
https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html