web-dev-qa-db-ja.com

親データが変更されたときに子コンポーネントにそのデータとビューをリロードさせる方法Angular 4

私はangular 4.を使用していますが、私はAngular JS。

オブジェクトの配列を持つ親コンポーネントがあります

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

そして、親コンポーネントでは、ユーザーはビューを介してピープル配列を変更します

親コンポーネントビューには、次のようにピープル配列を反復処理する子コンポーネント（personComponent）があります。

<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メソッドが呼び出されます...問題は、子コンポーネントがそのデータを更新せず、人配列内の各人の割合が更新されないことです。

子コンポーネントのperson変数でngOnChangesを使用しようとしましたが、子コンポーネントデータが更新されなかったため、子コンポーネントビューも変更されませんでした。何ができますか。

javascriptarraysangular
5
Joshua Majebi

Personコンポーネントでは、初期化時にパーセンテージ値を取得し、更新しなくなりました。その代わりに、常に最新の値を持つpersonプロパティを使用できます。したがって、次のように使用できるはずです。

{{person.percentage}}

テンプレートで。

0
Justinas Simanavicius