角度:ngOnChanges不更新值 [英] Angular: ngOnChanges not updating value

问题描述

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

I am new to ngOnchanges and facing below issue.

我的父组件正在ngOnChanges上设置recom值，并将相同的值发送给子组件. child收到的内容与ngOnChanges中的输入相同.根据诸如totalVal> 0之类的条件，我将inputField设置为true，而最初将其设置为false.如果inputField为true，则以反应形式显示某些组件.但是当我的下面的结构执行model2Form()时，它仍然将inputField设置为false.我无法发布实际代码，因此仅根据我的项目创建了一个结构，如下所示.

my parent component is setting recom value on ngOnChanges and sends the same value to child component. child receives the same as input in ngOnChanges. depending on some condition like totalVal>0 i set inputField to true which is initially set to false. if inputField is true i show some component in reactive forms. but when my below structure execute model2Form() it still gets inputField as false. I cant post actual code so just created a structure as per my project as shown below.

请提出如何解决此问题的建议.

Please suggest how do i solve this issue.

// 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>

推荐答案

问题是您正在尝试监视Array上的更改.数组和对象不适用于ngOnChanges，因为它们是通过引用而不是值传递的.字符串和整数在这里可以很好地工作，因为Angular可以轻松知道何时更改了值.由于Javascript通过引用传递对象和数组，因此Angular仅在引用发生更改时才触发更改检测.

The problem is that you are trying to monitor changes on an Array. Arrays and Objects don't work so well with ngOnChanges because they are passed by reference, not value. Strings and Integers work well here because its easy for Angular to tell when the value has been changed. Since Javascript passes Objects and Arrays by reference, Angular will only trigger change detection when the reference changes.

真正解决此问题的三种方法:

Three ways to solve this really:

1. 如果您可以立即访问自己的值，则可以将复杂值作为主题或BehaviorSubject存储在服务中.然后在需要时在整个应用程序中订阅它.每次将新值推送到Observable时，您的组件都将在其上运行其逻辑.
2. 将需要监视的属性分隔为监视字符串或数字之类的值的单独的@Inputs().
3. 解决此问题的第三种方法是使用

1. Store your complex value in a service as either a subject or BehaviorSubject if you have access to your values right away. Then subscribe to it throughout your application where needed. Every time a new value is pushed to the Observable, your components will run their logic on it.
2. Separate the properties you need to monitor into separate @Inputs() that are monitoring the value of something like a string or number.
3. The third way to solve this is to assign the Object/Array to an entirely new entity using Object.assign() function and replacing the value of your property outright with the new entity thus creating a new reference.

这篇关于角度:ngOnChanges不更新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！