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

问题描述

我正在使用 Angular2 和 TypeScript 并且我有一个枚举:

export enum Role {ServiceAdmin, CompanyAdmin, Foreman, AgentForeman,机组成员、代理机组成员、客户}

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

解决方案

枚举只是一个对象.

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

{0: "服务管理员",1:公司管理员"，2:工头"，3:代理工头"，4:船员"，5:AgentCrewMember"，6:客户"，服务管理员:0，公司管理员:1名，工头:2名，AgentForeman: 3,船员人数:4，AgentCrew成员:5，顾客:6}

所以你可以这样迭代(plnkr):

@Component({...模板:`<div *ngFor="let item of keys()">{{ 物品 }}

`})导出类 YourComponent {角色 = 角色；键():数组<字符串>{var keys = Object.keys(this.role);返回keys.slice(keys.length/2);}}

或者创建自定义管道会更好:

@Pipe({名称:'enumToArray'})导出类 EnumToArrayPipe 实现 PipeTransform {变换(数据:对象){const 键 = Object.keys(data);返回keys.slice(keys.length/2);}}

示例

更新

Typescript 2.4 允许枚举成员包含字符串初始值设定项，例如:

enum Colors {红色 = "红色",绿色 = "绿色",蓝色 = "蓝色",}

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

I'm using Angular2 and TypeScript and I have an enum:

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

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?

解决方案

An enum is just an object.

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
}

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);
    }
}

Or would be better to create custom pipe:

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

Example

Update

Typescript 2.4 allows enum members to contain string initializers like:

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

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

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