2

リアクティブ形式でパイプを使用すると問題が発生します。で使用できるように、オブジェクトを配列に変換するパイプがあります*ngFor。

これまでのところ良いです...問題は、入力を作成すると（フォームコントロールを使用して値をバインドする）*ngFor、この入力の各変更がパイプの更新をトリガーすることです。その結果、入力に 1 文字を書き込むたびに入力がフォーカスを失います。

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;
    }
}

問題を示すプランカーを次に示します。

書き込み時にパイプを非アクティブにするにはどうすればよいですか、またはパイプとは異なるアプローチを使用できますか?

オブジェクトを変更することはできず、不明なプロパティがあることに注意してください (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:要素を削除してから追加するときの順序が間違っているも参照してください

于 2016-11-27T16:04:48.827 に答える