反应形式中每个控制更改的管道更新
问题描述:
我遇到麻烦,在我的反应形式中使用管道。我有一个管道将我的对象转换为一个数组,因此它可以与*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
)
答
这可能会解决问题
<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
令人惊叹! 'trackByIdy'('trackByIdx')存在拼写错误。顺便说一句,有没有办法直接使用索引(在'trackBy')而不是引用外部函数? – ncohen
不要这样想。有一个pull请求允许使用属性名称('item')而不是函数,但对原始值不起作用。解决这个问题的另一种方法是将值包装在一个对象中,然后不需要'trackBy' –