Angular 2テンプレートでenumを使用する方法

Question

angularjs 2テンプレートでenumを使用しようとしています。未定義

Answer 1

SectionTypeのプロパティ 'プライマリ' を読み込めません直接使用することはできません。

enum SectionType { 
    Primary, 
    Aditional, 
    Payment 
} 

それは投げているEXCEPTION：例外TypeError 以下はここ

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

は私の列挙型である私のコードですテンプレート内でどちらかあなたのコンポーネントのプロパティに設定し、どちらかがチェックする方法を指定する追加：

@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

テンプレートに列挙型を使用する簡単な方法は、

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

です

テンプレート内：

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