角度：ngOnChanges 不更新值

Question

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

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

Answer 1

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

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

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