☰

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

tag-icon • tag-icon angular
Angular 2 テンプレートで enum を使用する方法 質問する

私はAngularJS 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 SectionType {
    Primary,
    Aditional,
    Payment
}

例外が発生しています: TypeError: 未定義のプロパティ 'Primary' を読み取ることができません

ベストアンサー1

テンプレートでEnumを使用する簡単な方法は

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

次にテンプレートで:

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

おすすめ記事