Angular2 उपयोग enum मूल्य

Question

मैं एक HTML विशेषता के चयनित मान सेट करने के लिए एक enum मान का उपयोग करने की कोशिश कर रहा हूँ:

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> 

लेकिन मैं "पढ़ा नहीं जा सकता संपत्ति 'फर्स्ट वैल्यू' अपरिभाषित "

क्या एचटीएमएल गुणों के मूल्य के रूप में enum मान का उपयोग करने का कोई तरीका है?

Answer 1

आपका टेम्पलेट केवल अपने घटक वर्ग के सदस्य चर का उपयोग कर सकता है। इसलिए, यदि आप enum के मानों का उपयोग करना चाहते हैं, तो इसे एक सदस्य चर के लिए (Enum) असाइन करें।

अपने घटक में,

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

तो फिर आप अपने टेम्पलेट में enum के तत्वों का उपयोग करने के लिए स्वतंत्र हैं।

Answer 2

आप जब से तुम उपयोग कर रहे हैं

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

नीचे के रूप में HTML तत्व को आवंटित करने के लिए एक enum का उपयोग कर सकते [(ngModel)] इनपुट तत्व पर, आप [value] इनपुट तत्व की संपत्ति को नहीं सौंप सकते।

LIVE DEMO

Answer 3

साथ

कोणीय 2 // enum

export enum IType 
{ 
    Vegetables = 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>