Angular2 использовать значение перечисления в атрибуте значения html

Question

Я пытаюсь использовать значение перечисления, чтобы установить выбранное значение атрибута HTML:

export enum MyEnum {
    FirstValue,
    SecondValue
}
export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

@MyEnumAware
@Component({
    templateUrl: "./lot-edit.component.html",
    styleUrls: ["./lot-edit.component.css"],
})
export class LotEditComponent implements OnInit {
    @Input() myEnumValue: MyEnum ;

}

<td><input name="status" type="radio" [value]="MyEnum.FirstValue" [(ngModel)]="myEnumValue"></td>
<td><input name="status" type="radio" [value]="MyEnum.SecondValue" [(ngModel)]="myEnumValue"></td>

однако я получаю "Не могу прочитать свойство 'FirstValue' из неопределенного"

Есть ли способ использовать значение перечисления в качестве значения атрибутов HTML?

Answer 1

Ваш шаблон может получить доступ только к переменным-членам своего класса компонентов. Итак, если вы хотите использовать значения перечисления, присвойте его (перечисление) переменной-члену.

В вашем компоненте

export class MyComp {
  MyEnum = MyEnum;
  .....
}   

Тогда вы можете получить доступ к элементам перечисления в вашем шаблоне.

Answer 2

Вы можете использовать enum для назначения html-элемента, как показано ниже

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input type="text" [(ngModel)]="value"/>
    </div>
  `,
})
export class App {
  name:string;
  myValue:any= MyEnum;
  value:string;
  constructor() {
    this.name = 'Angular2';
    this.value=this.myValue[1];
    console.log(this.value);
  }
}

Поскольку вы используете [(ngModel)] для элемента ввода, вы не можете присвоить свойству [value] элемента ввода.

LIVE DEMO

Answer 3

С Angular 2 // enum

export enum IType
{
Vegitable=0,
Fruits=1,
Fish=2
}

// угловой компонент 2 в скрипте типа

import {IType} from '/itype';
export class DataComponent
{
getType(id:number):any
{
      return IType[id];
}
}

// в вашем HTML-файле

<div>
{{getType(1)}}
</div>