[解決済み] ngFor を使用して、Typescript Enum を文字列の配列として反復処理するにはどうすればよいですか？

質問

Angular2とTypeScriptを使用しており、enumを持っています。

export enum Role {
    ServiceAdmin, CompanyAdmin, Foreman, AgentForeman, 
    CrewMember, AgentCrewMember, Customer
}

enumを繰り返し処理するために*ngForを使用したいです。これを行うための最良の方法は何ですか？私はPipeを作成する必要がありますか？それとももっと簡単な方法があるのでしょうか？

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

enumは単なるオブジェクトです。

enumはJavaScriptではこのように記述されます。

{
    0: "ServiceAdmin", 
    1: "CompanyAdmin", 
    2: "Foreman", 
    3: "AgentForeman", 
    4: "CrewMember", 
    5: "AgentCrewMember", 
    6: "Customer", 
    ServiceAdmin: 0, 
    CompanyAdmin: 1, 
    Foreman: 2, 
    AgentForeman: 3, 
    CrewMember: 4,
    AgentCrewMember: 5,
    Customer: 6
}

つまり、このように反復することができるのです( plnkr ):

@Component({
    ...
    template: `
    <div *ngFor="let item of keys()">
      {{ item }}
    </div>  
  `
})
export class YourComponent {
    role = Role;
    keys() : Array<string> {
        var keys = Object.keys(this.role);
        return keys.slice(keys.length / 2);
    }
}

または はカスタムパイプを作成するのがよいでしょう。 :

@Pipe({
  name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
  transform(data: Object) {
    const keys = Object.keys(data);
    return keys.slice(keys.length / 2);
  }
}

例

更新

Typescript 2.4 では enum のメンバに以下のような文字列のイニシャライザを含めることができるようになりました。

enum Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

この場合、単に Object.keys(data); をパイプから返します。