Преобразовать строку в перечисление Typescript в шаблонном выражении Angular 6 - PullRequest
Новая
       27

Преобразовать строку в перечисление Typescript в шаблонном выражении Angular 6

0 голосов
/ 15 ноября 2018

У меня есть простое приложение Angular 6 с Angular Material выберите компонент , который я хотел бы двусторонне связать с переменной enum.Для этого мне нужно преобразовать строковое значение, которое используется для определения параметров, и значение перечисления, которое является фактическим типом Typescript.Чтобы преобразовать строку в enum, я всегда делал это (предполагая, что 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
}

Все хорошо при разработкес угловым сервером разработки.Но как только я запускаю ng build --prod, появляется эта ошибка:

ОШИБКА в src \ app \ app.component.html (2,73):: Тип 'string' не может быть назначен типу 'MyEnum'.

Почему это могло бы появиться в строительстве, а не в разработке?Любая идея, как это исправить, не используя явный вызов метода в инструкции шаблона?

Большое спасибо!

PS Я использую Typescript 2.7.2

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Ваш шаблон не распознает его как enum, поэтому вам нужно просто назначить его как строку и прочитать как enum в 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 и проверьте, работает ли он - Счастливого кодирования !!

0 голосов
/ 15 ноября 2018

Попробуйте это. 

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

Ошибка, которую вы имели, потому что Typescript считал, что s имеет тип string, а не Value1. Но у перечисления есть определенные ключи Value1 и Value2, а не любая строка. Отсюда и ошибка.

Почему это появляется в строительстве, а не в разработке?

Возможно, во время разработки у вас есть средство просмотра файлов, которое компилирует ваш TS в JS, даже если есть какие-то ошибки. У меня есть тот же наблюдатель в моем VSCode. Однако ошибки все еще присутствуют, и поэтому процесс сборки выдаст ошибку.

...