在Angular 6模板語句中將字符串轉換為Typescript枚舉

Question

我有一個帶有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

Answer 1

嘗試這個。

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

您遇到的錯誤是因為Typescript認為s類型為string而不是Value1 。 但是枚舉具有確定鍵Value1和Value2 ，而不是任何字符串。 因此，錯誤。

為什么這會出現在建築物中而不出現在開發中？

可能在開發過程中，即使有一些錯誤，您也可以使用文件監視程序將TS編譯為JS。 我的VSCode中有相同的觀察者。 但是錯誤仍然存​​在，因此構建過程將引發錯誤。

Answer 2

您的模板無法將其識別為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構建項目，並檢查其是否有效-編碼愉快！