Angular ngOnChange不'；无法为JavaScript对象输入触发

我有一个输入，它是一个javaScript对象。当它更改时，不会触发ngOnChange。我尝试了一个数字输入，它工作正常

export class ResultsComponent implements OnInit, OnChanges {

  @Input() SearchParams: {
    HouseSelected : Boolean,
    ApartementSelected : Boolean,
    ShopSelected : Boolean,
    KolangiSelected : Boolean,
    BusinessSelected : Boolean,
    NumOfRooms : String,
    PriceLow: Number,
    PriceHigh: Number,
    //TODO add City
    MeterLow:Number,
    MeterHigh:Number
  };


  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges){
    console.log(this.SearchParams);
  }
}

父html

<form class="w3-container " >
            <h4>price</h4>
            <div>
            <input name= "priceLow" [(ngModel)]="SearchParams.PriceLow" placeholder="low cost">
            تا
            <input name= "priceHigh" [(ngModel)]="SearchParams.PriceHigh" placeholder="High cost">
            </div>

            <h4>Meter</h4>
            <div>
            <input name= "MeterLow" [(ngModel)]="SearchParams.MeterLow" placeholder="smallest">
            تا
            <input name= "MeterHigh" [(ngModel)]="SearchParams.MeterHigh"  placeholder="Highest">
            </div>

            <div >
              <h4>type</h4>

              <md-checkbox style="width:50%" name=" 1 " [(ngModel)]="SearchParams.HouseSelected">House</md-checkbox>
              <md-checkbox style="width:50%" name=" 2 " [(ngModel)]="SearchParams.ApartementSelected">apartment</md-checkbox>
            </div>

            <h4>room Number/h4>    
            <md-radio-group name="numberOfRooms" [(ngModel)]="SearchParams.NumOfRooms">
              <md-radio-button class="example-margin" value="1">1</md-radio-button>
              <md-radio-button class="example-margin" value="2">2</md-radio-button>
              <md-radio-button class="example-margin" value="3">3</md-radio-button>
              <md-radio-button class="example-margin" value="4">3+</md-radio-button>

          </form>

        </div>
    </div>

    <div>
      <app-results [SearchParams] = "this.SearchParams"></app-results>
    </div>

价格
تا
米
تا
类型
房子
公寓
房间号/h4>
1.
2.
3.
3+

接收此输入的子项是应用程序结果（如HTML中所示）

---

应用程序结果HTML中没有任何内容

最好通过传递新对象来触发更改检测。若要在对象上触发更改检测，引用应更改以更改创建新对象所需的引用。您可以使用es7语法快捷方式

object = {
   ...object,
   changeParameter: parameter
 }

你应该改变一点函数

ngOnChanges(changes: SimpleChanges){
console.log(changes)
if (changes.SearchParams) {
 this.SearchParams = changes.SearchParams.currentValue
 console.log(this.SearchParams)
 }
}

---

最好通过传递新对象来触发更改检测。若要在对象上触发更改检测，引用应更改以更改创建新对象所需的引用。您可以使用es7语法快捷方式

object = {
   ...object,
   changeParameter: parameter
 }

你应该改变一点函数

ngOnChanges(changes: SimpleChanges){
console.log(changes)
if (changes.SearchParams) {
 this.SearchParams = changes.SearchParams.currentValue
 console.log(this.SearchParams)
 }
}

---

尝试的另一个选项是实施ngDoCheck而不是ngOnChanges并编写您自己的更改响应行为，请参阅参考：

尝试的另一个选项是实施ngDoCheck而不是ngOnChanges并编写您自己的更改响应行为，请参阅参考资料：

最简单的方法是创建一个全新的对象，然后将其指定给子对象的输入绑定到的属性

父组件

this.SearchParams=Object.assign（{}，NewSearchParams）；

你几乎遇到了与中的海报完全相同的问题。在答案中有一些关于变化检测工作原理的非常好的见解

---

这一课我已经学了好几次了：）Javascript将对象作为引用传递，这就是为什么对它们执行更改检测可能很棘手的原因。如果您创建一个全新的对象并覆盖上一个对象，则应触发更改检测。

最简单的方法是创建一个全新的对象，然后将其指定给子对象的输入绑定到的属性

父组件

this.SearchParams=Object.assign（{}，NewSearchParams）；

你几乎遇到了与中的海报完全相同的问题。在答案中有一些关于变化检测工作原理的非常好的见解

---

这一课我已经学了好几次了：）Javascript将对象作为引用传递，这就是为什么对它们执行更改检测可能很棘手的原因。如果您创建了一个全新的对象并覆盖了以前的对象，它应该会触发更改检测。

您可以向我们展示您的组件html代码吗？如果您可以展示您的html代码，我可能会帮助您。我知道这个问题。我需要查看子组件的component.html。向我显示应用程序结果html@Melchia我说。什么都没有。我只是想用typescript来控制数据，试试这个：你能给我们看你的组件html代码吗？如果你能给我看你的html代码，我可能会帮你。我知道这个问题。我需要查看子组件的component.html。向我显示应用程序结果html@Melchia我说。什么都没有。我只是尝试使用typeScripttry来控制数据：@AshkanR.Nejad如果您同时提出这两个要求，它们将100%工作，或者错误地传入属性html@AshkanR.Nejad如果您同时提出这两个要求，它们将100%有效，或者htmlYep中的属性传递错误，结果不太好。我无法达到预期的行为。所以我把帖子改成了另一个可以触发的帖子。是的，效果不太好。我无法达到预期的行为。所以我把帖子改成了另一个可以触发的帖子。