Question

我有一个简单的Angular 6应用，它带有Angular Material select component，我想双向绑定到枚举变量。为此，我需要在用于标识选项的字符串值和作为实际Typescript类型的枚举值之间进行转换。要将字符串转换为枚举，我总是这样做（假设Value1是MyEnum的成员）：

let s: string = "Value1";
let myEnumVariable: MyEnum = MyEnum[s];

，但这似乎在Angular模板语句中不起作用，例如对于以下内容：

app.component.html：

<mat-form-field>
  <mat-select placeholder="Select a value" [value]="MyEnum[myVariable]" (valueChange)="myVariable = MyEnum[$event]">
    <mat-option value="Value1">Value 1</mat-option>
    <mat-option value="Value2">Value 2</mat-option>
  </mat-select>
</mat-form-field>

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public myVariable: MyEnum = MyEnum.Value1;
  public MyEnum = MyEnum;
}

enum MyEnum {
  Value1,
  Value2
}

使用Angular开发服务器进行开发时，一切都很好。但是一旦我运行ng build --prod，就会出现此错误：

src \ app \ app.component.html（2,73）中的
ERROR：：类型'string'不是可分配为“ MyEnum”类型。

为什么这会出现在建筑物中而不出现在开发中？知道如何解决此问题，而无需在模板语句中使用显式方法调用吗？

非常感谢！

P.S我正在使用Typescript 2.7.2

Answer 1

尝试一下。

let s = 'Value1' as 'Value1';
let myEnumVariable: MyEnum = MyEnum[s];

您遇到的错误是因为Typescript认为s的类型为string，而不是Value1。但是枚举具有确定的键Value1和Value2，而不是任何字符串。因此是错误。

这为什么会出现在建筑物中而不出现在开发中？

可能在开发过程中，您有一个文件监视程序，即使有一些错误，也可以将TS编译为JS。我的VSCode中有相同的观察者。但是错误仍然存在，因此构建过程将引发错误。

Answer 2

您的模板无法将其识别为enum，因此您只需将其分配为字符串并在enum中将其读取为typescript-我不确定这是正确的方法，但是您可以尝试

每个enum都将值与键参数匹配，并考虑传递键并在enum键中获得所需的输出，似乎是一个number，而您尝试将其提取为一个string，所以要像这样

enum MyEnum {
  Value1 = "Value1",
  Value2 = "Value2"
}

现在，当您将其读取为MyEnum.Value1.toString()时，它将为您返回特定的值“ Value1”

现在像这样public myVariable: string = MyEnum.Value1.toString()读取它，将其传递给模板应该具有string属性，如果要在ts中读取它，则可以传递所需的string来获取enum

中的值

<mat-form-field>
  <mat-select placeholder="Select a value" [value]="myVariable" (valueChange)="myVariable = $event">
    <mat-option value="Value1">Value 1</mat-option>
    <mat-option value="Value2">Value 2</mat-option>
  </mat-select>
</mat-form-field>

我希望这对您有帮助-尝试在ng build --prod中构建您的项目并检查其是否有效-编码愉快！！

在Angular 6模板语句中将字符串转换为Typescript枚举

2 个答案: