각도 4 - 각도 4를 사용 OnChanges 내부 formcontrol.setValue는()()

Question

나는 (이 데이터를 가져 후)는 부모 구성 요소의에서 페이지 번호와 pageSize가을 얻는 paging.component 있습니다.

paging.component은 OnChanges 라이프 사이클 후크를 사용하여 @Input의 변경 사항을 검색합니다.

paging.component 또한 페이지 크기을 변경할 수있는 <select> 입력이 있습니다.

OnInit 단계에서 <select>은 페이지 크기이 상위 구성 요소에서 전달됩니다.

당신이 <select>으로 pageSize가을 변경하면 모든 작품을 좋아하지만, 나는 때때로 (원래 값과 같은) 다른 값으로 상위 구성 요소에서 pageSize가을 변경하고 싶습니다.

그러나 부모 구성 요소에서 페이지 크기을 변경하면 <select> 입력이 변경되지 않습니다. (다른 모든 것들이 올바르게 작동한다고해도).

if (this.pageSizeFG) { 
    this.pageSizeCtrl.setValue(this.pagesize); 
} 

그러나,이 오류를 제공합니다 :

은 내가 ngOnChanges 방법에 다음 코드를 추가하는 시도

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

페이징은 또한 내가하려고하면 1 페이지에 자신을 다시 설정하라는 유지하는 것

다른 페이지로 이동하십시오.

다른 라이프 사이클 후크 인 ChangeDetectorRef과 ngZone을 살펴 보았지만 문제가 악화 된 것으로 보입니다.

오류를 나타내는 plnkr here을 만들었습니다. 당신이 paging.component.ts에 가서 this.pageSizeCtrl.setValue(this.pagesize);으로 줄을 주석으로 경우

후 모든 것이 <select>가 업데이트되지 않습니다 를 제외하고 잘 작동합니다.

Answer 1

이것은 선택 요소 + 귀하의 ngOnchanges 라이프 사이클 메소드에서 ngModelChange 이벤트로 인해 발생합니다. 무슨 일이 일어나고 무엇

<select (ngModelChange)="setPageSize($event)">...</select> 

그래서이 모든 식 오류를 변경에 이르게

1. you pass in a new input to paging.component
2. ngOnChanges fires
3. within ngOnChanges, this.pageSizeCtrl.setValue(this.pagesize) fires
4. This causes the ngModelChange event to fire (setPageSize)
5. setPageSize emits to the parent component
6. parent changes input which causes ngOnChanges to fire again.

입니다.

는이 문제를 해결하려면, 나는 setPageSize() 이벤트가 발생하는 원인이되지 않는 대신 ngModelChange

<select (change)="setPageSize()">...</select> 

이 방법 setValue()의 변경 이벤트를 사용할 수 있습니다.setPageSize()이 pageSize 속성을 내보내는 방법을 업데이트해야합니다. 여기

setPageSize() { 
    // get pageSizeCtrl value programatically 
    let pageSize = +this.pageSizeCtrl.value; 
    this.pagechange.emit({ page: 1, pageSize: pageSize }); 
} 

는 수정 ( http://plnkr.co/edit/zJEIYJzG5OGRXIfA77Qz?p=preview)

함께 작업이다 plnkr