Angular2 ngSwitchステートメントでtypescript enum値を使用する方法

Typescript列挙型は、Angular2のngSwitchディレクティブと自然に一致するようです。しかし、コンポーネントのテンプレートで列挙型を使用しようとすると、「undefined in ...のプロパティ 'xxx'を読み取れません」と表示されます。コンポーネントテンプレートで列挙値を使用するにはどうすればよいですか？

これは、列挙型（ngFor）のすべての値に基づいてHTML選択オプションを作成する方法とは異なることに注意してください。この質問は、列挙型の特定の値に基づくngSwitchに関するものです。列挙型へのクラス内部参照を作成する同じアプローチが表示されますが。

コンポーネントクラスの列挙型への参照を作成し（最初の文字を小文字に変更したところです）、その参照をテンプレート（plunker）から使用できます。

import {Component} from 'angular2/core';

enum CellType {Text, Placeholder}
class Cell {
  constructor(public text: string, public type: CellType) {}
}
@Component({
  selector: 'my-app',
  template: `
    <div [ngSwitch]="cell.type">
      <div *ngSwitchCase="cellType.Text">
        {{cell.text}}
      </div>
      <div *ngSwitchCase="cellType.Placeholder">
        Placeholder
      </div>
    </div>
    <button (click)="setType(cellType.Text)">Text</button>
    <button (click)="setType(cellType.Placeholder)">Placeholder</button>
  `,
})
export default class AppComponent {

  // Store a reference to the enum
  cellType = CellType;
  public cell: Cell;

  constructor() {
    this.cell = new Cell("Hello", CellType.Text)
  }

  setType(type: CellType) {
    this.cell.type = type;
  }
}

カスタムデコレータを作成してコンポーネントに追加し、列挙型を認識させることができます。

myenum.enum.ts：

export enum MyEnum {
    FirstValue,
    SecondValue
}

myenumaware.decorator.ts

import { MyEnum } from './myenum.enum';

export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

enum-aware.component.ts

import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';

@Component({
  selector: 'enum-aware',
  template: `
    <div [ngSwitch]="myEnumValue">
      <div *ngSwitchCase="MyEnum.FirstValue">
        First Value
      </div>
      <div *ngSwitchCase="MyEnum.SecondValue">
        Second Value
      </div>
    </div>
    <button (click)="toggleValue()">Toggle Value</button>
  `,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
  myEnumValue: MyEnum = MyEnum.FirstValue;

  toggleValue() {
    this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
        ? MyEnum.SecondValue : MyEnum.FirstValue;
  }
}

これはシンプルで魅力のように機能します:)このように列挙型を宣言するだけで、HTMLテンプレートで使用できます

  statusEnum: typeof StatusEnum = StatusEnum;

Angular4-HTMLテンプレートngSwitch / ngSwitchCaseでの列挙型の使用

ここでの解決策： https //stackoverflow.com/a/42464835/802196

クレジット：@snorkpete

あなたのコンポーネントでは、

enum MyEnum{
  First,
  Second
}

次に、コンポーネントで、メンバー 'MyEnum'を介してEnum型を取り込み、列挙型変数 'myEnumVar'の別のメンバーを作成します。

export class MyComponent{
  MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

これで、.htmlテンプレートでmyEnumVarおよびMyEnumを使用できます。例：ngSwitchでの列挙型の使用：

<div [ngSwitch]="myEnumVar">
  <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
  <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
  <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>

rc.6 / final以降

...

export enum AdnetNetworkPropSelector {
    CONTENT,
    PACKAGE,
    RESOURCE
}

<div style="height: 100%">
          <div [ngSwitch]="propSelector">
                 <div *ngSwitchCase="adnetNetworkPropSelector.CONTENT">
                      <AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel">
                                    </AdnetNetworkPackageContentProps>
                  </div>
                 <div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE">
                </div>
            </div>              
        </div>


export class AdnetNetwork {       
    private adnetNetworkPropSelector = AdnetNetworkPropSelector;
    private propSelector = AdnetNetworkPropSelector.CONTENT;
}

@Eric Leaseのデコレータの代わりに、残念ながらビルド--aot（したがって--prod）を使用しても機能しないため、アプリケーションのすべての列挙型を公開するサービスを使用しました。それを必要な各コンポーネントに簡単な名前で公に注入するだけで、ビューの列挙型にアクセスできます。例えば：

サービス

import { Injectable } from '@angular/core';
import { MyEnumType } from './app.enums';

@Injectable()
export class EnumsService {
  MyEnumType = MyEnumType;
  // ...
}

モジュールのプロバイダーリストに含めることを忘れないでください。

コンポーネントクラス

export class MyComponent {
  constructor(public enums: EnumsService) {}
  @Input() public someProperty: MyEnumType;

  // ...
}

コンポーネントhtml

<div *ngIf="someProperty === enums.MyEnumType.SomeValue">Match!</div>

「私は本当に私は本当にこれをしたいですか？」

HTMLで直接列挙型を参照しても問題はありませんが、場合によっては、タイプセーフを失わない、よりクリーンな代替手段があります。たとえば、他の回答に示されているアプローチを選択した場合、コンポーネントで次のようなTTを宣言している可能性があります。

public TT = 
{
    // Enum defines (Horizontal | Vertical)
    FeatureBoxResponsiveLayout: FeatureBoxResponsiveLayout   
}

HTMLで異なるレイアウトを表示するには、*ngIfレイアウトタイプごとにを用意し、コンポーネントのHTMLの列挙型を直接参照できます。

*ngIf="(featureBoxResponsiveService.layout | async) == TT.FeatureBoxResponsiveLayout.Horizontal"

この例では、サービスを使用して現在のレイアウトを取得し、非同期パイプを介して実行してから、それを列挙値と比較しています。それはかなり冗長で、複雑で、見るのはそれほど楽しくありません。また、列挙の名前も公開されますが、それ自体が冗長すぎる可能性があります。

代替、HTMLからのタイプセーフを保持

または、次のようにして、コンポーネントの.tsファイルでより読みやすい関数を宣言することもできます。

*ngIf="isResponsiveLayout('Horizontal')"

ずっときれい！しかし、誰か'Horziontal'が誤って入力した場合はどうなりますか？HTMLで列挙型を使用したい理由は、タイプセーフでしたか？

keyofといくつかのtypescriptマジックを使用すれば、それを実現できます。これは関数の定義です：

isResponsiveLayout(value: keyof typeof FeatureBoxResponsiveLayout)
{
    return FeatureBoxResponsiveLayout[value] == this.featureBoxResponsiveService.layout.value;
}

FeatureBoxResponsiveLayout[string]which の使用法は、渡された文字列値を列挙型の数値に変換することに注意してください。

無効な値を使用すると、AOTコンパイルでエラーメッセージが表示されます。

タイプ '"H4orizo​​ntal' 'の引数は、タイプ'" Vertical "のパラメーターに割り当てることができません| 「水平」

現在、VSCodeはH4orizontalHTMLエディターで下線を引くほどスマートではありませんが、コンパイル時に警告が表示されます（--prod buildまたは--aotスイッチを使用）。これは、将来のアップデートで改善される可能性もあります。

私のコンポーネントmyClassObjectはMyClass、それ自体が使用していたタイプのオブジェクトを使用しましたMyEnum。これにより、上記と同じ問題が発生します。次のようにして解決しました：

export enum MyEnum {
    Option1,
    Option2,
    Option3
}
export class MyClass {
    myEnum: typeof MyEnum;
    myEnumField: MyEnum;
    someOtherField: string;
}

そして、これをテンプレートで次のように使用します

<div [ngSwitch]="myClassObject.myEnumField">
  <div *ngSwitchCase="myClassObject.myEnum.Option1">
    Do something for Option1
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option2">
    Do something for Option2
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option3">
    Do something for Opiton3
  </div>
</div>

'typetable reference'アプローチ（@Carl Gから）を使用していて、複数の型テーブルを使用している場合は、次のように検討することをお勧めします。

export default class AppComponent {

  // Store a reference to the enums (must be public for --AOT to work)
  public TT = { 
       CellType: CellType, 
       CatType: CatType, 
       DogType: DogType 
  };

  ...

  dog = DogType.GoldenRetriever; 

次に、htmlファイルにアクセスします

{{ TT.DogType[dog] }}   => "GoldenRetriever"

型テーブルを参照していることを明確にし、コンポーネントファイルの不要な汚染を回避するため、このアプローチをお勧めします。

グローバルを置くこともできます TTどこかにして、必要に応じて列挙型を追加ます（これが必要な場合は、@ VincentSelsの回答で示されているようにサービスを作成することもできます）。多くのタイプテーブルがある場合、これは面倒になるかもしれません。

また、短い名前を取得するために、宣言でそれらの名前を常に変更します。