Object.keys() 関数を使用して列挙型を反復処理する方法

2024-04-12

TypeScript 列挙型を文字列の配列として ngFor で反復処理する方法

このチュートリアルでは、Angular 2 および Angular 4 で TypeScript 列挙型を文字列の配列として ngFor で反復処理する方法を説明します。

例

以下の例では、Color という名前の列挙型を定義し、Red、Green、Blue という 3 つの値を持つようにします。

enum Color {
  Red,
  Green,
  Blue
}

次に、colors という名前の変数を定義し、Color 列挙型の値の配列として初期化します。

const colors: Color[] = [Color.Red, Color.Green, Color.Blue];

最後に、ngFor ディレクティブを使用して、colors 配列の各値を反復処理し、li 要素に表示します。

<ul>
  <li *ngFor="let color of colors">{{ color }}</li>
</ul>

コードの説明

enum Color { Red, Green, Blue }：この行は、Color という名前の列挙型を定義します。この列挙型は、Red、Green、Blue という 3 つの値を持つことができます。
const colors: Color[] = [Color.Red, Color.Green, Color.Blue];：この行は、colors という名前の変数を定義し、Color 列挙型の値の配列として初期化します。
<ul>：このタグは、未整理リスト (UL) を定義します。
<li *ngFor="let color of colors">{{ color }}</li>：この行は、ngFor ディレクティブを使用して、colors 配列の各値を反復処理します。color 変数は、colors 配列の各値に割り当てられます。{{ color }} ディレクティブは、color 変数の値を li 要素に表示します。

補足

この例では、ngFor ディレクティブを使用して列挙型の値を反復処理する方法を示しました。他の方法もあります。たとえば、Object.keys() 関数を使用して列挙型のキーを配列として取得し、その配列を ngFor で反復処理することができます。
列挙型の値を文字列に変換する必要がある場合は、toString() メソッドを使用することができます。

enum Color {
  Red,
  Green,
  Blue
}

const colors: Color[] = [Color.Red, Color.Green, Color.Blue];

HTML

<ul>
  <li *ngFor="let color of colors">{{ color }}</li>
</ul>

説明

実行結果

以下の出力結果が表示されます。

Red
Green
Blue

Object.keys() 関数を使用して、列挙型のキーを配列として取得し、その配列を ngFor で反復処理することができます。

enum Color {
  Red,
  Green,
  Blue
}

const colors: string[] = Object.keys(Color).map(key => Color[key]);

<ul>
  <li *ngFor="let color of colors">{{ color }}</li>
</ul>

Object.keys(Color)：この行は、Color 列挙型のキーの配列を取得します。
.map(key => Color[key])：この行は、Object.keys(Color) 配列の各キーに対して、Color[key] でキーに対応する値を取得します。Color[key] は、キーの名前を文字列として使用して列挙型の値にアクセスする構文です。

for...in ループを使用して、列挙型のキーを反復処理し、そのキーに対応する値を取得することができます。

enum Color {
  Red,
  Green,
  Blue
}

const colors: string[] = [];

for (const key in Color) {
  colors.push(Color[key]);
}

<ul>
  <li *ngFor="let color of colors">{{ color }}</li>
</ul>

for (const key in Color)：この行は、Color 列挙型のキーを反復処理します。key 変数は、列挙型の各キーに割り当てられます。
colors.push(Color[key]);：この行は、Color 列挙型のキーに対応する値を取得し、colors 配列に追加します。

列挙型を直接テンプレートで使用することもできます。

<ul>
  <li>{{ Color.Red }}</li>
  <li>{{ Color.Green }}</li>
  <li>{{ Color.Blue }}</li>
</ul>

angular angular2-template