Búsqueda de sitios web

typescript - angular 6 - ngOnChanges no se dispara para arreglo anidado


tengo un objeto toSpecialities que tiene dos arreglos specialitiesOptions y specialities, envío este objeto del componente padre al componente hijo

this.toSpecialities = { specialitiesOptions: specialities, specialities: this.exerciseFramework.specialities };
<ef-specialties [data]="toSpecialities"></ef-specialties>

en el componente hijo usé ngOnChanges para detectar el cambio del objeto

@Component({
    selector: 'ef-specialties'
})
export class SpecialtiesComponent implements OnChanges {

    @Input()
    public data: any;

    constructor() { }

    ngOnChanges(changes: SimpleChanges) {
        if (changes["data"] && changes["data"].currentValue) {
          console.log(changes["data"]);
        }
    }

}

cuando actualizo el specialities, no puedo detectar el cambio del objeto toSpecialities en el componente hijo

this.toSpecialities.specialities = this.array.specialities;

Respuesta #1

Esto se debe a que ngOnChanges solo se dispara cuando la referencia del objeto cambia para las propiedades @Input. Por lo tanto, se activará si cambias el valor de entrada de una propiedad de tipo simple (string, boolean, number), pero no se activará si cambias una propiedad de un objeto.

Prueba esto si quieres que ngOnChanges se ejecute

this.toSpecialities = {...this.toSpecialities, 
   specialities : this.array.specialities};

Esto clonará this.toSpecialities y cambiará el valor de specialities del clon. Cambiar el valor de toSpecialities activará ngOnChanges

Artículos relacionados