कोणीय 2 टेम्पलेट्स में enum का उपयोग कैसे करें

Question

मैं कोणीय 2 टेम्पलेट्स में enum का उपयोग करने की कोशिश कर रहा हूं। नीचे मेरी कोड है

@Component({ 
    selector: 'test', 
    template: ` 
<ul class="nav navbar-nav"> 
    <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li> 
    <li class="{{activeSection == SectionType.Aditional ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Aditional)">Additional Details</a></li> 
    <li class="{{activeSection == SectionType.Payment ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Payment)">Payment Settings </a></li>   
    </ul>` 
    }) 
    export class TestComponent{ 
    activeSection: SectionType = SectionType.Primary; 
    setActiveSection(section: SectionType) { 
     this.activeSection = section; 
    } 
} 

यहाँ मेरी enum है:

enum SectionType { 
    Primary, 
    Aditional, 
    Payment 
} 

यह फेंकने है अपवाद: लेखन त्रुटि: अपरिभाषित

Answer 1

SectionType की संपत्ति 'प्राथमिक' पढ़ा नहीं जा सकता सीधे नहीं किया जा सकता टेम्पलेट के भीतर। या तो आप इसे अपने घटक के एक प्रॉपर्टी पर सेट, या तो आप की जाँच करने के तरीकों को निर्दिष्ट जोड़ें:

@Component({ 
    selector: 'test', 
    template: ` 
     <ul class="nav navbar-nav"> 
     <li class="{{isPrimarySection(activeSection) ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li> 
     (...) 
     </ul> 
    ` 
    }) 
    export class TestComponent{ 
    activeSection: SectionType = SectionType.Primary; 
    setActiveSection(section: SectionType) { 
     this.activeSection = section; 
    } 
    isPrimarySection(activeSection) { 
     return activeSection == SectionType.Primary 
    } 
} 

या

@Component({ 
    selector: 'test', 
    template: ` 
     <ul class="nav navbar-nav"> 
     <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li> 
     (...) 
    </ul>` 
    }) 
    export class TestComponent{ 
    activeSection: SectionType = SectionType.Primary; 
    setActiveSection(section: SectionType) { 
     this.activeSection = section; 
    } 
    SectionType:SectionType = SectionType; 
    } 

Answer 2

एक टेम्पलेट में एक Enum उपयोग करने के लिए आसान तरीका

@Component(...) 
export class MyComp { 
    public MyEnum: any = MyEnum; 
} 

है

फिर टेम्पलेट में:

<select> 
    <option value="MyEnum.ValueA">Value A</option> 
</select>