Rohraktualisierung für jede Steueränderung in reaktiver Form

Question

Ich habe Probleme mit einer Rohrleitung in meiner reaktiven Form. Ich habe eine Pipe, die mein Objekt in ein Array verwandelt, so dass es mit *ngFor verwendet werden kann.

So weit so gut ... Das Problem ist, dass, wenn ich eine Eingabe (mit Formularsteuerung, um den Wert zu binden) in meinem *ngFor erstellen, jede Änderung in diesem Eingang ein Rohr-Update auslöst. Das Ergebnis ist, dass meine Eingabe jedes Mal den Fokus verliert, wenn ich einen Buchstaben in die Eingabe schreibe.

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> 

Und meine Pfeife:

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; 
    } 
} 

Hier ist ein plunker das Problem zu demonstrieren.

Wie kann ich die Pipe inaktiv machen, wenn ich schreibe, oder kann ich einen anderen Ansatz als eine Pipe verwenden?

Bitte beachten Sie, dass ich nicht mein Objekt ändern kann und dass es unkown Eigenschaften (item1 und item2 im Plunker Beispiel)

Answer 1

Dies könnte beheben das Problem

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

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

Ich denke, das Problem wird verursacht, weil *ngFor über primitive Werte, die geändert werden, iteriert. *ngFor kann den vorherigen Wert nicht mit dem neuen vergleichen und entfernt daher das Element und fügt ein weiteres hinzu.

Siehe auch Angular2 NgFor inside tree model: wrong order when remove and then add elements