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

Question

我有一个带有 Angular Material select component 的简单 Angular 6 应用程序，我想双向绑定到枚举变量。为此，我需要在用于标识选项的字符串值和作为实际 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) 中的错误：：类型“字符串”不是 可分配给类型“MyEnum”。

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

非常感谢！

PS 我使用的是 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 in typescript - 我不确定这是正确的方式，但您可以试一试

每个enum 都会将值与键解析匹配，并考虑传递键并在您的enum 中获得所需的输出键似乎是number，而您正试图将其作为string 获取所以chage是这样的

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 中构建您的项目并检查它是否有效 - 编码愉快！