反应形式中每个控制更改的管道更新

我遇到麻烦，在我的反应形式中使用管道。我有一个管道将我的对象转换为一个数组，因此它可以与*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和item1item2）

来源

2016-11-27 ncohen

这可能会解决问题

<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

来源

2016-11-27 16:04:48

令人惊叹！ 'trackByIdy'（'trackByIdx'）存在拼写错误。顺便说一句，有没有办法直接使用索引（在'trackBy'）而不是引用外部函数？ – ncohen

不要这样想。有一个pull请求允许使用属性名称（'item'）而不是函数，但对原始值不起作用。解决这个问题的另一种方法是将值包装在一个对象中，然后不需要'trackBy' –

反应形式中每个控制更改的管道更新

回答

相关问题