Enum を ngFor で表示する

Angular のテンプレート内で ngFor ディレクティブを使用して TypeScript Enum の値を繰り返し処理するには、Enum を適切な形式に変換する必要があります。一般的には、Enum のキーを文字列配列に変換し、それを ngFor に渡します。

手順

1. Enum の定義
   

   enum Color {
       Red = '赤',
       Green = '緑',
       Blue = '青'
   }
   

2. コンポーネントクラスでの処理
   

   import { Component } from '@angular/core';
   import { Color } from './color.enum';
   
   @Component({
       selector: 'app-my-component',
       template: `
           <ul>
               <li *ngFor="let color of colorKeys">{{ color }}</li>
           </ul>
       `
   })
   export class MyComponent {
       colorKeys = Object.keys(Color);
   }
   

解説

• ngFor="let color of colorKeys"
  ngFor ディレクティブは、colorKeys 配列の各要素を color 変数に割り当て、テンプレート内の li 要素を繰り返し生成します。
• Object.keys(Color)
  このコードは、Color Enum のキー（文字列）を配列として取得します。

テンプレートの表示

このコードを実行すると、以下のリストが表示されます：

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

• Enum の値の直接使用
  Enum の値が文字列である場合、直接 ngFor で使用することもできます。ただし、キーと値のペアが必要な場合は、上記の方法が適切です。
• カスタムパイプの使用
  より複雑な変換が必要な場合は、カスタムパイプを作成して Enum を適切な形式に変換することもできます。

注意

• Object.keys() を使用することで、Enum のキーを文字列配列として取得し、ngFor で繰り返し処理が可能になります。
• Enum のキーは数値であるため、直接文字列として使用することはできません。

Enum の定義

enum Color {
  Red = '赤',
  Green = '緑',
  Blue = '青'
}

コンポーネントクラス

import { Component } from '@angular/core';
import { Color } from './color.enum';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      <li *ngFor="let color of colorKeys">{{ color }}</li>
    </ul>
  `
})
export class MyComponent {
  colorKeys = Object.keys(Color);
}

1. Enum の定義
   Color という名前の Enum を定義し、それぞれの値に日本語の文字列を割り当てます。
2. コンポーネントクラス
   

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

カスタムパイプを作成することで、Enum を必要な形式に変換することができます。

// color.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { Color } from './color.enum';

@Pipe({
  name: 'colorKeys'
})
export class ColorKeysPipe implements PipeTransform {
  transform(value: typeof Color): string[] {
    return Object.keys(value);
  }
}

// my-component.ts
import { Component } from '@angular/core';
import { Color } from './color.enum';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      <li *ngFor="let color of Color | colorKeys">{{ color }}</li>
    </ul>
  `
})
export class MyComponent {
}

Enum の値が文字列の場合

Enum の値が文字列である場合、直接 ngFor で使用することができます。

enum Color {
  Red = '赤',
  Green = '緑',
  Blue = '青'
}

// my-component.ts
import { Component } from '@angular/core';
import { Color } from './color.enum';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      <li *ngFor="let color of Color">{{ color }}</li>
    </ul>
  `
})
export class MyComponent {
}