Saltar al contenido

Angular 2: Cómo detectar cambios en un array? (@propiedad de entrada)

Al fin después de tanto trabajar hemos dado con el arreglo de esta preocupación que ciertos de nuestros lectores de nuestro sitio web han presentado. Si deseas aportar algún detalle no dudes en aportar tu información.

Solución:

OnChanges Lifecycle Hook se activará solo cuando cambie la instancia de la propiedad de entrada.

Si desea verificar si un elemento dentro de la entrada array se ha agregado, movido o eliminado, puede usar IterableDiffers dentro del DoCheck Gancho de ciclo de vida 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 un array, 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 en el interior array en Angular2

Siempre puede crear una nueva referencia a la array fusionándolo con un vacío array:

this.yourArray = [..., ..., ...];
this.yourArray[0].yourModifiedField = "whatever";

this.yourArray = [].concat(this.yourArray);

El código anterior cambiará el array referencia y activará el mecanismo OnChanges en los componentes secundarios.

Lea el siguiente artículo, no se pierda los objetos mutables frente a los inmutables.

La cuestión clave es que mutas array elementos, mientras array la referencia sigue siendo la misma. Y las comprobaciones de detección de cambios de Angular2 solo array referencia 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

Aquí tienes las reseñas y calificaciones

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *