Angular2 wartość użycie enum w atrybucie wartości html

Question

Próbuję użyć wartości enum aby ustawić wybraną wartość atrybutu 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> 

jednak otrzymuję „nie można odczytać właściwość "FirstValue" nieokreślonego "

Czy istnieje sposób użycia wartości wyliczeniowej jako wartości atrybutów html?

Answer 1

Twój szablon może tylko uzyskać dostęp do zmiennych członków swojej klasy komponentów. Tak więc, jeśli chcesz użyć wartości wyliczenia, przypisz je (Enum) do zmiennej członkowskiej.

W komponentu,

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

Wtedy jesteś wolny, aby uzyskać dostęp do elementów wyliczenia w szablonie.

Answer 2

Można użyć enum przypisać do elementu html jak poniżej

@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); 
    } 
} 

Ponieważ używasz [(ngModel)] na elemencie wejściowym, nie można przypisać do [wartość] własności elementu wejściowego.

LIVE DEMO

Answer 3

Z kątowa 2 // enum

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

// Element kątowy 2 w script type

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

// w pliku html

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