-1

我有一个带有选择控件的角度形式，它从服务器上的枚举接收它的值。

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

我在这里创建了一个示例，其中响应硬编码在类型变量中：stackblitz

我现在正在尝试使用 form 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'
    });
  }

但是我的值不再加载到选择控件中。

我怎样才能解决这个问题？

我开始创建一个指令，但我不知道如何拦截绑定以将值更改为等效的枚举键。

请帮忙

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 回答
0

但是，由于您选择的项目是基于key，所以没有keywith value Type1。所以你[value]是空的。value您可以通过和 set找到它的密钥[value]：

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

getKey(typeName:string) {
    let key = this.types.find(f => f.value === typeName).key;
    return key ? key : 0;
}
于 2019-10-14T13:29:02.913 回答