上一篇: 角卫,文档中的陈述不清楚下一篇:angular – formControlName和Fo...

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

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angular – 如何使用ngFor作为字符串数组迭代Typescript Enum，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用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
}

所以你可以这样迭代它(@L_502_0@)：

@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