如何在數組對象被修改時觸發更改檢測？

Question

在我angular4應用程序，我有一個基於陣列的* ngFor指令組件：

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

在能夠刪除汽車部件IM的其他部分，所以在認購deleteCar()方法的我更新persons數組：

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

的問題是，* ngFor當我的人數組中修改現有的人對象循環不會被觸發。如何解決這個問題？

Answer 1

我通過解構數組來解決它。我不確定這是做到這一點的最佳方式。

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

只要它會改變數組的引用，angular將會注意到數組已被更新。

Answer 2

實現此目標的最佳方法是在服務中擁有行爲主題並在您的組件中訪問它。

所以，你的服務類可能看起來像這樣

@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 

} 

在組件

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); 
} 

這應該工作。

更多信息在 - >https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service