当父数据更改时，如何强制子组件重新加载其数据和视图

Question

我正在使用angular4。尽管我曾经使用过Angular JS，但对它还是有点陌生​​。

我有一个具有对象数组的父组件

people: Person[]; //array of Person model

并且在父组件中，用户可以通过其视图修改人员数组

现在，在父组件视图中有一个子组件（personComponent）像这样遍历people数组

<person *ngFor="let person of people; let i = index" [person]="person">

子组件显示personComponent中每个人的百分比

@Input() person:Person; //person model
percent:number;

ngOnInit(){
    this.percent = this.person.percent;
}

现在在父组件中，当将新人员添加到人员数组时，每个子组件都应具有新的百分比。

所以我在父组件中创建了一种方法，可以计算每个人的百分比

setPercent(){
  this.people.forEach((p)=>{
     p.percent = Math.round((p.value/this.total_amount)*100) //total amount is a variable in the parent component
  })
}

现在每次添加新人员时，都会调用setPerson方法...问题是子组件不会更新其数据，并且人员数组中每个人员的百分比也不会更新。

我尝试在子组件person变量上使用ngOnChanges，但是它没有更新子组件数据，因此子组件视图也没有更改。我该怎么办。

Answer 1

在您的Person组件中，您在初始化时获取百分比值并且不再更新它。person您可以使用具有始终最新值的属性，而不是这样做。所以你应该能够将它用作

{{person.percentage}}

在你的模板中。