Angular でEnum型を初期化してテンプレートで使用する方法
Enum型をそのままテンプレートで使用したほうが可読性が良いため、初期化してテンプレートでそのまま使用したりします。
例えば以下です。
import { Component } from '@angular/core'; enum Sample { Tokyo = '東京', Osaka = '大阪', Hukuoka = '福岡' } @Component({ selector: 'app-root', template: ` <p>{{place}}</p> <!-- 何を指しているかわかりづらい --> `, styleUrls: ['./app.component.css'] }) export class AppComponent { public place1:Sample = Sample.Tokyo; }
これは、Enum型の列挙子を変数に格納し、表示した例です。
typeofを使うことにより、Enumを初期化することができます。
変数名: typeof Enum型 = Enum型
これで変数名にEnum型が入ります。以下のように変数を使うことができます。
import { Component } from '@angular/core'; enum Sample { Tokyo = '東京', Osaka = '大阪', Hukuoka = '福岡' } @Component({ selector: 'app-root', template: ` <p>{{place.Tokyo}}</p><!-- enum型をそのまま使える --> <p>{{place.Osaka}}</p><!-- enum型をそのまま使える --> <p>{{place.Hukuoka}}</p><!-- enum型をそのまま使える --> `, styleUrls: ['./app.component.css'] }) export class AppComponent { public place: typeof Sample = Sample; // typeofキーワードを使用する }
enum型の宣言は別ファイルにしてimportしてあげるともっとわかりやすくなります。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント