以反应形式对每个控件更改进行管道更新

Question

我在使用反应形式的管道时遇到问题。我有一个将我的对象转换为数组的管道，因此它可以与 *ngFor.

一起使用

到目前为止一切顺利...问题是当我在 *ngFor 中创建输入（使用表单控件绑定值）时，此输入中的每个更改都会触发管道更新。结果是每次我在输入中写一个字母时，我的输入都会失去焦点。

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 无法将以前的值与新值相匹配，因此删除该项目并添加另一个。

另见

以反应形式对每个控件更改进行管道更新

Pipe update for each control change in reactive form

angular2-pipe

angular