JavaScript 객체 입력에 대해 ngOnChange가 트리거되지 않습니다.

Question

Input이 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> 

이 입력을 recives 아이입니다 앱 결과 (당신은 HTML에서 볼 수 있듯이) 에

Answer 1

그것의 더 나은 앱 결과 HTML에서 어디에도 없습니다 새 객체를 전달하여 변경 감지를 트리거합니다. 개체에 대한 변경 감지를 트리거하려면 새 개체를 만드는 데 필요한 참조를 변경해야합니다. 당신은 ES7 구문 바로 가기

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

를 사용하고

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

Answer 2

시도하는 또 다른 옵션 대신 ngOnChanges의 ngDoCheck을 구현하고 자신의 변화 대응 행동을 작성하는 것입니다 약간의 기능을 변경해야합니다, 참조를 참조하십시오 : https://angular.io/guide/lifecycle-hooks#docheck

Answer 3

가장 쉬운 방법은 완전히 새로운 개체를 만든 다음이를 자식 입력이 바인딩 된 속성에 할당하는 것입니다.

당신은 꽤 많이 this question의 포스터로 동일한 문제가 발생한

this.SearchParams = Object.assign({}, NewSearchParams); 

부모 구성 요소. 거기에 대한 답변에서 변경 감지가 작동하는 방법에 대한 몇 가지 좋은 통찰력이 있습니다.

나는이 교훈을 힘든 방법으로 몇 번 배웠다. 자바 스크립트는 객체를 참조로 전달하는데, 참조를 기준으로 변경 감지를 수행하는 것이 까다로울 수있다. 완전히 새로운 오브젝트를 작성하고 이전 오브젝트를 겹쳐 쓰는 경우, 변경 감지를 트리거해야합니다.