Question

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

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

我在这里创建了一个示例，其中将响应硬编码在type变量中：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'
    });
  }

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

我该如何解决？

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

请帮助

Answer 1

您已将 types 数组

中的选项值设置为 key 属性

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

Answer 2

但是，由于您选择的项目基于key，因此没有key的值为Type1。因此，您的[value]为空。您可以通过value找到其密钥并设置[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;
}

Angular patchValue不适用于JsonConverter

2 个答案: