Question

在我的angular4 app中，我有一个带有基于数组的* ngFor指令的组件：

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

在组件的另一部分中，我无法删除汽车，因此在订阅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);
}

这应该有用。

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

如何在修改数组对象时触发更改检测？

2 个答案: