角度：ngOnChangesは値を更新しません

Question

私はngOnchangesを新しくして、問題に直面しています。

親コンポーネントは、ngOnChangesに値を設定し、同じ値を子コンポーネントに送信します。子はngOnChangesの入力と同じものを受け取ります。 totalVal> 0のような条件によっては、inputFieldをtrueに設定します。これは最初はfalseに設定されています。もしinputFieldが真であれば、私はいくつかのコンポーネントを反応形式で表示します。私の下の構造体がmodel2Form（）を実行してもinputFieldはfalseになります。実際のコードを投稿することはできませんので、以下に示すようにプロジェクトごとに構造を作成しました。

この問題を解決する方法を提案してください。

// parent component 

ngOnchanges(){ 
    this.recom = [{ 
    totalVal: 5000, 
    monthlydata: true 
    }] 
} 

//child component 

@Input() 
private recom: any; 

inputField: boolean = false; 


ngOnChanges(){ 
    this.setValue(); 
    this.loadFuture(); 
} 

setValue(){ 
    if(this.recom.totalVal > 0){ 
    this.inputField = true; 
    } 
} 

loadFuture(){ 

} 

model2Form(){ 

//getting input field as false even if i set it as true in setValue() 

    if(inputField){ 
    this.heroForm.setControl('secretLairs', addressFormArray); 
    } 

} 

<!-- parent component> 

<parent-comp [recom]="recom"></parent-comp> 


<!-- child component --> 

<div [FormControlName]="secretLairs"> </div> 

Answer 1

問題は、アレイの変更を監視しようとしていることです。配列とオブジェクトはngOnChangesでうまく動作しません。なぜなら、値ではなく参照渡しであるからです。文字列と整数は、値が変更されたときにAngularが簡単に指示できるため、ここでうまくいきます。 JavascriptはObjectsとArraysを参照渡しするので、Angularは参照が変更されたときにのみ変更検出をトリガーします。本当にこれを解決する

3つの方法：件名またはBehaviorSubjectすぐに自分の価値観へのアクセス権を持っている場合のいずれかのようなサービスで

1. ストアあなたの複素数値を。その後、必要に応じてアプリケーション全体に登録します。 Observableに新しい値がプッシュされるたびに、コンポーネントがロジックを実行します。
2. モニタリングする必要のあるプロパティを、文字列または数値などの値を監視している別の@Inputs()に分けます。
3. これを解決する3つ目の方法は、Object.assign()関数を使用して完全に新しいエンティティにオブジェクト/配列を割り当て、プロパティの値を新しいエンティティに置き換えて新しい参照を作成することです。

Answer 2

changeイベントngOnchangeは、コンポーネントの入力プロパティに変更が加えられた場合にのみ発生します。あなたのケースではparentcomponentには入力プロパティがないので、ngOnchageはあなたのために起動しません。

下のコードでは、私はappcomponent.tsのparentcomponentを使用していましたが、ngOnchageが読み込まれたときに、入力されたプロパティーが変更されたngOnchageが読み込まれました。

だから私は、TextBoxコントロールのOnChangeイベントで子プロパティを変更し、子コントロールngOnchageがトリガーと更新された値が来てしまった以上、私は、私のテキストボックスコントロールの値を変更したとき。

親コントロールに入力値を渡して、親と子よりもその値を変更すると、ngOnChageが機能します。

親コンポーネント

---

import { Component } from '@angular/core'; 
import { OnChanges, SimpleChanges, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'parentcomp', 
    template: ` 
    this needs to be wok 
    <h3>Countdown to Liftoff (via local variable)</h3> 
    <input type="text" [ngModel] = "display" (ngModelChange)="onChange($event)"/> 
    {{display}} 
    <Childcomp [recom] = "recom"> </Childcomp> 
    ` 
}) 
export class ParentComponent implements OnChanges, OnInit { 
    ngOnInit(): void { 
     this.recom = [{ 
      totalVal: 5000, 
      monthlydata: false 
     }]; 
    } 
    display: string; 
    recom: any; 

    constructor() { 
     this.display = "test"; 
    } 

    onChange() 
    { 
     this.recom = [{ 
      totalVal: 5000, 
      monthlydata: true 
     }]; 

    } 

    //this will not trigger 
    ngOnChanges(changes: SimpleChanges): void { 
     debugger; 
     this.recom = [{ 
      totalVal: 5000, 
      monthlydata: true 
     }]; 
    } 
} 

子コンポーネント

---

import { Component } from '@angular/core'; 
import { OnChanges, SimpleChanges, Input } from '@angular/core'; 

@Component({ 
    selector: 'Childcomp', 
    template: ` 
    <h3>Child component</h3> 

    ` 
}) 
export class Childcomponent implements OnChanges { 
    @Input() 
    private recom: any; 

    constructor() { 
    } 

    ngOnChanges(changes: SimpleChanges): void { 
     debugger; 
     for (let propName in changes) { 
     let chng = changes[propName]; 
     let cur:any = chng.currentValue; 
     let prev:any = chng.previousValue; 
     alert(`${propName}: currentValue = ${cur[0].monthlydata}, previousValue = ${prev[0].monthlydata}`); 
     } 
    } 
}