-1

サーバー上の列挙型から値を受け取る選択コントロールを備えた角度のあるフォームがあります。

<select name="" id="" [formControl]="form.get('myType')">
  <option *ngFor="let type of types"  [value]="+type['key']">
    {{ type['value'] }} ({{  type['key']}})
  </option>
</select>

タイプ変数にハードコードされた応答を使用して、ここで例を作成しました: stackblitz

現在、フォーム patchValue メソッドを使用してフォームに入力しようとしています (setValues ボタンとメソッドを参照)。

  setValues() {
    this.form.patchValue({
      myType: 0
    });
  }

実際には、この応答はサーバーから送信されます。

サーバーのモデルは次のとおりです。

public class TestModel
{
    public MyType Type { get; set; }
}

これまでのところ、これは機能します。

サーバーのモデルを変更して Json StringEnumConverter 属性を含めると、次のようになります。

public class TestModel
{
    [JsonConverter(typeof(StringEnumConverter))]
    public MyType Type { get; set; }
}

patchValue メソッドは次のようになりました (setValues2 ボタンとメソッドを参照)。

  setValues2() {
    this.form.patchValue({
      myType: 'Type1'
    });
  }

ただし、私の値は選択コントロールに読み込まれなくなりました。

どうすればこれを回避できますか?

ディレクティブの作成を開始しましたが、バインディングをインターセプトして値を enums キーと同等のものに変更する方法がわかりません。

助けてください

4

2 に答える 2

0

タイプ配列からオプション値をキープロパティとして設定しました

<option *ngFor="let type of types"  [value]="+type['key']">

しかし、setValues2メソッドではフォームの値をtype['value']に設定しているため、このメソッドは機能しません。値1または2が期待されるため、 Type2を取得します。

タイプ配列からオプションの値をオブジェクトとして設定しようとすることができると思います

<option *ngFor="let type of types"  [value]="type">

次に、メソッドはこれらのオブジェクトをフォーム値として設定する必要があります

setValues() {
    this.form.patchValue({
      myType: this.types[0]
    });
  }

  setValues2() {
    this.form.patchValue({
      myType: this.types[1]
    });
  }
于 2019-10-14T13:10:17.887 に答える