/ / Aktualizacja rury dla każdej zmiany sterowania w formie reaktywnej - kątowa, kątowa 2-rurowa

Aktualizacja rury dla każdej zmiany sterowania w formie reaktywnej - kątowa, kątowa 2-rurowa

Mam problemy z używaniem rury w mojej reaktywnej formie Mam rurkę, która przekształca mój obiekt w tablicę, dzięki czemu można go używać z *ngFor.

Do tej pory tak dobrze ... problem polega na tym, że kiedy tworzę dane wejściowe (używając kontroli form do wiązania wartości) wewnątrz mojego *ngFor, każda zmiana tego wejścia wyzwala aktualizację potoku. W rezultacie moje wejście traci ostrość za każdym razem, gdy piszę jedną literę na wejściu.

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>

I moja rura:

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

Tutaj jest plunker aby zademonstrować problem.

Jak mogę uczynić rurę nieaktywną podczas pisania lub czy mogę zastosować inne podejście niż rura?

Zwróć uwagę, że nie mogę zmienić mojego obiektu i że ma on nieskomplikowane właściwości (item1 i item2 w przykładzie plunkera)

Odpowiedzi:

1 dla odpowiedzi № 1

To może rozwiązać problem

<div *ngFor="let item of myForm.controls.object.value | keys trackBy:trackByIdx" formGroupName="object">
trackByIdx(index: number, obj: any): any {
return index;
}

Myślę, że problem jest spowodowany, ponieważ *ngFor iteruje po zmodyfikowanych pierwotnych wartościach. *ngFor nie może dopasować poprzedniej wartości do nowej i dlatego usuwa przedmiot i dodaje kolejny.

Zobacz też Angular2 NgFor wewnątrz modelu drzewa: niewłaściwa kolejność podczas usuwania, a następnie dodawanie elementów