2

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

到目前为止一切顺利...问题是当我在 my 中创建输入（使用表单控件绑定值）*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。

如何在编写时使管道处于非活动状态，或者我可以使用与管道不同的方法？

请注意，我无法更改我的对象并且它具有未知属性（item1在item2plunker 示例中）

4

1 回答 1

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

另请参见Angular2 NgFor inside tree model: wrong order when remove and then add elements

于 2016-11-27T16:04:48.827 回答