配列オブジェクトが変更されたときに変更検出をトリガする方法は？私angular4アプリで

Question

私は配列に基づいて、* ngForディレクティブを持つコンポーネントがあります：deleteCar()方法Iの購読でので、車を削除することができコンポーネントIMの他の部分では

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

を更新へpersons配列：

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

問題は、私は人の列内の既存のpersonオブジェクトを変更するとき* ngForループがトリガされていないということです。これを解決するには？

Answer 1

私は配列を破壊することで解決します。私はそれがそれを行う最良の方法であるとは思わない。

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

配列の参照が変更される限り、angleは配列が更新されていることに気付くでしょう。

Answer 2

これを実現する最善の方法は、サービス内で動作の件名を持つことであり、コンポーネント内の動作にアクセスすることです。

だからあなたのサービスクラスは、コンポーネント

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

これは動作するはずで、この

@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 

} 

のように見えることがあります。

詳細情報で - >https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service