Angular 角度：ngOnChanges不更新值

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

我的父组件正在ngOnChanges上设置recom值，并将相同的值发送给子组件。子项接收与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>

//父组件
ngOnchanges（）{
this.recom=[{
总数：5000，
月数据：对
}]
}
//子组件
@输入（）
私人推荐：任何；
输入字段：布尔值=false；
ngOnChanges（）{
这个.setValue（）；
这是loadFuture（）；
}
setValue（）{
如果（this.recom.totalVal>0）{
this.inputField=true；
}
}
loadFuture（）{
}
model2Form（）{
//即使我在setValue（）中将输入字段设置为true，也将其设置为false
如果（输入字段）{
this.heroForm.setControl（'secretLairs'，addressFormArray）；
}
}

问题在于您试图监视阵列上的更改。数组和对象不能很好地处理

ngOnChanges

，因为它们是通过引用传递的，而不是通过值传递的。字符串和整数在这里工作得很好，因为当值发生变化时，Angular很容易判断。由于Javascript通过引用传递对象和数组，所以Angular仅在引用更改时触发更改检测

解决这一问题的三种方法：

如果您可以立即访问您的值，请将您的复杂值作为主题或行为主题存储在服务中。然后在需要的地方在整个应用程序中订阅它。每次将新值推送到可观察对象时，组件都会在其上运行其逻辑

将需要监视的属性分离为单独的

@Inputs（）

，这些属性监视字符串或数字之类的值

解决此问题的第三种方法是使用函数将对象/数组指定给一个全新的实体，并用新实体直接替换属性的值，从而创建一个新的引用

---

仅当组件的输入属性发生任何更改时，才会发生更改事件ngOnchange。因此，在您的情况下，

parentcomponent

没有输入属性，因此ngOnchange不会为您触发

我为您创建了正在工作的代码-在下面的代码中，我在我的

appcomponent.ts

中使用了parentcomponent，当我加载时，

ngochange

不工作，但是child

ngochange

工作，并且它的输入属性被更改

因此，我在textbox控件的

OnChange

事件中更改了子属性，当我更改textbox控件中的值时，子控件

ngOnchange

被触发，更新的值出现

若将输入值传递给父控件并对其进行更改，则父控件和子控件

ngOnchange

将起作用

父组件

---

从'@angular/core'导入{Component}；
从“@angular/core”导入{OnChanges，SimpleChanges，OnInit}；
@组成部分({
选择器：'parentcomp'，
模板：`
这需要炒锅
发射倒计时（通过局部变量）
{{display}
`
})
导出类ParentComponent实现OnChanges、OnInit{
ngOnInit（）：void{
this.recom=[{
总数：5000，
月数据：假
}];
}
显示：字符串；
建议：任何；
构造函数（）{
this.display=“test”；
}
onChange（）
{
this.recom=[{
总数：5000，
月数据：对
}];
}
//这不会触发
ngOnChanges（更改：SimpleChanges）：无效{
调试器；
this.recom=[{
总数：5000，
月数据：对
}];
}
}

子组件

---

从'@angular/core'导入{Component}；
从“@angular/core”导入{OnChanges，SimpleChanges，Input}；
@组成部分({
选择器：'Childcomp'，
模板：`
子组件
`
})
导出类Childcomponent实现OnChanges{
@输入（）
私人推荐：任何；
构造函数（）{
}
ngOnChanges（更改：SimpleChanges）：无效{
调试器；
for（让propName进行更改）{
设chng=changes[propName]；
设cur:any=chng.currentValue；
设prev:any=chng.previousValue；
警报（`${propName}:currentValue=${cur[0].monthlydata}，previousValue=${prev[0].monthlydata}`）；
}
}
}

你能在JSFIDDLE提供你的代码吗对不起，兄弟，我在VDI工作，所以不能在这里复制/粘贴代码，所以在这里创建了一个副本，你的父ngChange正在工作，但子ngChange不工作…对吗？让我知道setValue（）{在更改完成时被调用？？？提供了答案，请查看一下我认为这个答案应该被标记！

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