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。

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

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

Answer 1

这可能会解决问题

- name: Transfer file
  synchronize:
    src: "/IP address/oracle"
    dest: "/tmp/INSTALL_{{ ansible_fqdn }}/"

<div *ngFor="let item of myForm.controls.object.value | keys trackBy:trackByIdx" formGroupName='object'>

我认为问题是由trackByIdx(index: number, obj: any): any { return index; }迭代修改的原始值引起的。 *ngFor无法将之前的值与新值匹配，因此会删除该项并添加另一项。

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

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

1 个答案: