angular – 如何使用ngFor作为字符串数组迭代Typescript Enum

发布时间：2020-12-17 08:02:02 所属栏目：安全来源：网络整理

导读：我正在使用Angular2和Typscript。我有一个枚举： export enum Role { ServiceAdmin,CompanyAdmin,Foreman,AgentForeman,CrewMember,AgentCrewMember,Customer} 我想使用* ngFor迭代枚举。做这个的最好方式是什么？我必须创建一个管道吗？或者有更简单的方法

我正在使用Angular2和Typscript。我有一个枚举：

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

我想使用* ngFor迭代枚举。做这个的最好方式是什么？我必须创建一个管道吗？或者有更简单的方法吗？

枚举只是一个对象。

你的枚举在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);
  }
}

Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!