角度4 - 角度4を使用してOnChanges内部formcontrol.setValueは、（）（）

Question

私は（それがデータを取得した後に）、それは親コンポーネントだからページ番号とたpageSizeを取得paging.componentを持っています。

paging.componentは、OnChangesライフサイクルフックを使用して@Inputの変更を探します。

paging.componentには<select>の入力があり、ページサイズを変更することができます。 OnInitフェーズ

、<select>は、親コンポーネントから渡さのpageSizeに設定されます。

あなたは<select>でたpageSizeを変更すると、それはすべてOKに動作しますが、私は時々も（元の値のような）別の値に親コンポーネントからたpageSizeを変更したいです。

ただし、pageSizeを親コンポーネントから変更しても、<select>の入力は変更されません。 （他のすべてが正しく機能しているように見えますが）。

私はngOnChangesメソッドに次のコードを追加してみました：

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

しかし、これはエラーを与える：

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

ページングは​​また、私がしようとした場合のページ1に自分自身をreseting保つように見えます別のページに移動します。

他のライフサイクルフックのうち、ChangeDetectorRefとngZoneを調べましたが、問題が悪化しているようです。

エラーを示すplnkr hereを作成しました。あなたがpaging.component.tsに行くとthis.pageSizeCtrl.setValue(this.pagesize);の行をコメントアウトした場合

は、その後、すべてが<select>が更新されない EXCEPT正常に動作します。

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()イベントが発生することはありません。この方法でsetValue()代わりngModelChange

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

の変更イベントを使用します。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です