angular - ¿Cómo activar la detección de cambios cuando se modifica un objeto en un array?

En mi aplicación angular4 tengo un componente con una directiva *ngFor basada en un arreglo:

 <div *ngFor="let person of persons">
   {{person.name}}
   {{person.car}}
 </div>

En la otra parte del componente, puedo eliminar un coche, así que en el subscribe del método deleteCar() actualizo el array persons a:

 deleteCar(car) {
   this.carService.deleteCar(car).subscribe(() =>  {
   this.persons.filter(obj => obj.car == car.name)
               .forEach(i => i.car = null);
   }
 }

El problema es que el bucle *ngFor no se activa cuando modifico un objeto de persona existente en el arreglo de personas. ¿Cómo resolver esto?

Respuesta #1

Lo resuelvo desestructurando el arreglo. No estoy seguro de que sea la mejor manera de hacerlo.

this.persons = [...this.persons];

En la medida en que cambie la referencia del arreglo, Angular notará que el arreglo ha sido actualizado.

Respuesta #2

La mejor manera de lograr esto es tener un sujeto de comportamiento en un servicio y acceder a él en tu componente.

Entonces tu clase de servicio puede verse así

@Injectable()
export class PersonService {

private persons=  new BehaviorSubject<any[]>([]);
public persons$ = this.persons.asObservable();//--> You can access this in your component

constructor() {
   //set the persons array here;
}

function deleteCar()//todo  

}

En el componente

constructor(private personService: PersonService) {

}



ngOnInit() {
    this.persons= this.personService.persons$//Dont forget to do add the assync pipe or subscribe
}

delete(car){
    this.personService.deleteCar(car);
}

Esto debería funcionar.

Más información en -> https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service