Angular：ngOnChanges 不更新值答案

【问题标题】：Angular: ngOnChanges not updating valueAngular：ngOnChanges 不更新值
【发布时间】：2018-05-21 15:58:53
【问题描述】：

我是 ngOnchanges 的新手，面临以下问题。

我的父组件在 ngOnChanges 上设置推荐值并将相同的值发送到子组件。 child 接收与 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>

【问题讨论】：

能否在 jsfiddle 提供您的代码
对不起，兄弟，我在 VDI 工作，所以不能在这里复制/粘贴代码，所以在这里创建了一个副本
你的父母 ngChange 正在工作，但孩子没有工作......对吗？？
让我知道 setValue(){ 在更改完成时被调用???
已提供答案，请看一下

标签： angular

【解决方案1】：

更改事件 ngOnchange 仅在对组件的输入属性进行任何更改时发生。因此，在您的情况下，parentcomponent 没有输入属性，因此 ngOnchange 不会为您触发。

我为您创建了正在运行的代码 - 在下面的代码中，我在 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}`);
      }
    }
}

【讨论】：

【解决方案2】：

问题是您正在尝试监视阵列上的更改。数组和对象不适用于ngOnChanges，因为它们是通过引用而不是值传递的。字符串和整数在这里工作得很好，因为 Angular 很容易判断值何时发生了变化。由于 Javascript 通过引用传递对象和数组，Angular 只会在引用发生更改时触发更改检测。

真正解决这个问题的三种方法：

如果您可以立即访问您的值，请将您的复杂值作为主题或 BehaviorSubject 存储在服务中。然后在需要时在整个应用程序中订阅它。每次将新值推送到 Observable 时，您的组件都会在其上运行它们的逻辑。
将您需要监控的属性分隔到单独的 @Inputs() 中，这些属性正在监控字符串或数字之类的值。
解决此问题的第三种方法是使用 Object.assign() 函数将对象/数组分配给一个全新的实体，并用新实体完全替换您的属性值，从而创建一个新引用。

【讨论】：