繁体   English   中英

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

Convert string to Typescript enum in Angular 6 template statement

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个带有Angular Material 选择组件的简单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)中的错误::类型'string'不能分配给类型'MyEnum'。

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

非常感谢!

PS我正在使用打字稿2.7.2

2 个回复

尝试这个。

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

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

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

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

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

每个enum都将值与键解析值匹配,并考虑传递键,并在您的enum键中获得所需的输出,这似乎是一个number并且您试图将其作为string来获取,因此请像这样修改它

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

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

现在像这样的public myVariable: string = MyEnum.Value1.toString()一样读取它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构建项目,并检查其是否有效-编码愉快!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题
 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM