[解決済み] Angular2 ngSwitchステートメントでtypescriptのenum値を使用する方法

質問

TypescriptのenumはAngular2のngSwitchディレクティブと自然にマッチしているように見えますが、実際はどうなのでしょうか？ しかし、コンポーネントのテンプレートでenumを使おうとすると、 "Cannot read property 'xxx' of undefined in ..."と表示されるのです。 どうすれば、コンポーネント・テンプレートでenum値を使用できますか？

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

どのように解決するのですか？

コンポーネントクラスでenumへの参照を作成し（頭文字を小文字に変えただけ）、その参照をテンプレートから利用することができます( プランカー ):

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