javascript - 当父数据更改时如何强制子组件重新加载其数据和 View Angular 4

Question

我正在使用 Angular 4。虽然我使用过 Angular JS，但我对它有点陌生。

我有一个包含对象数组的父组件

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

并且在父组件中，用户通过其 View 修改人员数组

现在父组件 View 中有一个子组件(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;
}

现在在父组件中，当一个新的人被添加到 people 数组时，每个子组件都应该有一个新的百分比。

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

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 方法...问题是子组件不会更新其数据，并且 people 数组中每个人的百分比也不会更新。

我曾尝试在子组件 person 变量上使用 ngOnChanges，但没有更新子组件数据，因此子组件 View 也没有改变。请问我该怎么办。

Answer 1

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

{{person.percentage}}

在您的模板中。