TypeScript
angular

AngularテンプレートでEnumを使う

あるオブジェクトに対して、状態を表すプロパティを持たせたくて調べたときのメモ。

数カ所同じ判定を行うテンプレートがあったので、文字列で判別するならせっかくなので列挙型を使ってみようと思った。

Enumの初期化

今回はテンプレートで使用するため、コンポーネントクラス内でEnumの変数を定義する必要がある。

初期化を行うには以下の記述で可能。

// import省略

/**
 * 値は自動で設定されている。
 * Red: 0, Green: 1, Blue: 2
 */
enum Color {
  Red,
  Green,
  Blue
}

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {
  /**
   * objectとして生成される。
   * { '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 }
   */
  public color: typeof Color = Color;
}

これでテンプレートの制御にEnumが使えるようになりました。

参考URL

更新履歴

  • 2018/06/06