如何使用ngFor将Typescript枚举迭代为字符串数组 [英] How can I use ngFor to iterate over Typescript Enum as an array of strings

问题描述

我正在使用Angular2和Typscript.我有一个枚举:

I am using Angular2 and Typscript. I have an enum:

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

我想使用* ngFor遍历枚举.做这个的最好方式是什么?我必须创建一个管道吗?还是有更简单的方法?

I want to use *ngFor to iterate over the enum. What is the best way to do this? Must I create a Pipe? Or is there a simpler way?

推荐答案

枚举只是一个对象.

您的枚举在JavaScript中是这样写的:

Your enum is written something like this in 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 ):

So you can iterate it this way (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);
  }
}

示例

Example

更新

Typescript 2.4允许枚举成员包含字符串初始化器，例如:

Typescript 2.4 allows enum members to contain string initializers like:

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

在这种情况下，您只需从管道返回Object.keys(data);.

in this case you can just return Object.keys(data); from pipe.

这篇关于如何使用ngFor将Typescript枚举迭代为字符串数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！