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

Question

I have a simple Angular 6 app with an Angular Material select component which I'd like to two-way bind to a enum variable. To do this I'll need to convert between string value which is used to identify the options and enum value which is the actual Typescript type. To convert string to enum I have always done this (assuming Value1 is a member of MyEnum):

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

but this doesn't seem to work in Angular template statements, eg for the following:

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
}

Everything is fine when developing with Angular development server. But once I run ng build --prod , this error appears:

ERROR in src\\app\\app.component.html(2,73): : Type 'string' is not assignable to type 'MyEnum'.

Why would this appear in building but not development? Any idea how to fix this, without using an explicit method call in the template statement?

Thanks a lot!

PS I'm using Typescript 2.7.2

Answer 1

Try this.

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

The error you had is because Typescript considered that s had type string and not Value1 . But the enum has definite keys Value1 and Value2 , not any string. Hence the error.

Why would this appear in building but not development?

Probably while development you have a file watcher that compiles your TS to JS even if there are some errors. I have the same watcher in my VSCode. However the errors are still there and the building process will therefore throw an error.

Answer 2

Your template doesn't recognise it as an enum so you need to just assign it as a string and read it as a enum in typescript - I'm not sure that this the correct way but you can give a try

Every enum will match the values with key pars and consider passing the key and get desired output in your enum key seems to be a number and you are trying to fetch it as a string so chage it like this

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

Now when your read it as MyEnum.Value1.toString() it will return you the specific value as "Value1"

Now read it like this public myVariable: string = MyEnum.Value1.toString() passing to the template should ne string property if you want to read it in ts you can pass the desired string to get the value from 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>

I hope this will help you - try to build your project in ng build --prod and check whether it works - Happy coding!!