リアクティブフォームでの各コントロールの変更に対するパイプ更新

Question

反応しやすいフォームでパイプを使用する際に問題が発生しています。オブジェクトを配列に変換して*ngForと一緒に使用できるパイプがあります。

これまでのところは良い...問題は、私は私の*ngFor内（値をバインドするフォームコントロールを使用して）入力を作成するときに、この入力の各変化は、パイプの更新をトリガーするということです。その結果、入力に1文字を書くたびに入力がフォーカスを失うことになります。

HTML：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)"> 
    <div *ngFor="let item of myForm.controls.object.value | keys" formGroupName='object'> 
    <label>{{lang}}</label> 
     <input name="item" type="text" placeholder="Option" [formControlName]="item.key"/> 
    </div> 
</form> 

そして、私のパイプ：ここ

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'keys' 
}) 

export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 

     if (!value) { 
      return value; 
     } 

     let keys = []; 
     for (let key in value) { 
      keys.push({key: key, value: value[key]}); 
     } 
     return keys; 
    } 
} 

は、問題を実証するplunkerです。

パイプとは別の方法を書いていますが、使用することができますか？

私は私のオブジェクトを変更することはできませんのでご注意、それが不明なプロパティ（plunker例でitem1とitem2）

Answer 1

これが問題

<div *ngFor="let item of myForm.controls.object.value | keys trackBy:trackByIdx" formGroupName='object'> 

trackByIdx(index: number, obj: any): any { 
    return index; 
} 

を修正する可能性があることをしてください私は、*ngForが変更されたプリミティブ値を反復処理するので、問題が発生したと思います。 *ngForは、前の値と新しい値を一致させることができないため、項目を削除して別の値を追加します。

も参照してください。Angular2 NgFor inside tree model: wrong order when remove and then add elements