角度：ngOnChanges不更新值

Question

我是ngOnchanges的新手，並且面臨以下問題。

我的父組件正在ngOnChanges上設置recom值，並將相同的值發送給子組件。 child接收的內容與ngOnChanges中的輸入相同。 根據諸如totalVal> 0之類的條件，我將inputField設置為true，最初將其設置為false。 如果inputField為true，則以反應形式顯示某些組件。 但是當我的下面的結構執行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一起ngOnChanges因為它們是通過引用而不是值傳遞的。 字符串和整數在這里可以很好地工作，因為Angular可以輕松知道何時更改了值。 由於Javascript通過引用傳遞對象和數組，因此Angular僅在引用發生更改時才觸發更改檢測。

真正解決此問題的三種方法：

1. 如果您可以立即訪問自己的值，則可以將復雜值作為主題或BehaviorSubject存儲在服務中。 然后在需要時在整個應用程序中訂閱它。 每次將新值推送到Observable時，您的組件都會在其上運行其邏輯。
2. 將需要監視的屬性分成單獨的@Inputs() ，它們監視諸如字符串或數字之類的值。
3. 解決此問題的第三種方法是使用Object.assign（）函數將Object / Array分配給一個全新的實體，並用新實體完全替換屬性的值，從而創建一個新引用。

Answer 2

更改事件ngOnchange僅在組件的輸入屬性發生任何更改時才會發生。 所以你的情況parentcomponent沒有輸入特性，因此ngOnchange不火你。

我為您創建了正在運行的代碼-在下面的代碼中，我在appcomponent.ts使用了appcomponent.ts ，加載后， ngOnchange不起作用，但是子ngOnchange起作用並且其輸入屬性被更改。

因此，我在文本框控件的OnChange事件中更改了子屬性，當我在文本框控件中更改了值時，子控件ngOnchange被觸發並更新了值。

如果將輸入值傳遞給父控件並進行更改，則父級和子級ngOnchange將起作用。

父組件

---

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}`);
      }
    }
}