Angular2 Verwendung Enum-Wert in html Wert Attribute

Question

Ich versuche, einen ENUM-Wert zu verwenden, um den ausgewählten Wert eines HTML-Attribut zu setzen:

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> 

aber ich „bekommen kann nicht lesen Eigenschaft 'FirstValue' von undefined "

Gibt es eine Möglichkeit, einen Enum-Wert als Wert von HTML-Attributen zu verwenden?

Answer 1

Ihre Vorlage kann nur auf Membervariablen der Komponentenklasse zugreifen. Wenn Sie also die Werte des Enums verwenden möchten, weisen Sie es einer Membervariablen zu (Enum).

In Ihrer Komponente,

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

Dann bist du frei, um die Elemente der Enumeration in Ihrer Vorlage zuzugreifen.

Answer 2

Sie einen ENUM verwenden können, wie unten

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

zu html-Element zuweisen Da Sie verwenden [(ngModel)] auf Eingabeelement, können Sie nicht auf [Wert] Eigenschaft des Eingabeelement zugeordnet werden.

LIVE DEMO

Answer 3

mit kantigem 2 // Enum

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

// Winkel 2 Komponente in Art Skript

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

// in der HTML-Datei

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