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

Question

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

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

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

Answer 1

枚举只是一个对象.

你的枚举在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 Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

在这种情况下,您可以Object.keys(data);从管道返回.

Answer 2

您可以只使用Angular 6.1中引入的“键值”管道。

<p *ngFor="let enum of TestEnum | keyvalue">
  {{ enum.key }} - {{ enum.value}}
</p>

查看完整示例-> https://stackblitz.com/edit/angular-gujg2e

Answer 3

模板的范围是组件实例.如果要访问此范围之外的内容,则需要使用组件实例使其可用:

@Pipe({name: 'enumToArray'})
export class EnumToArrayPipe implements PipeTransform {
  transform(value) : Object {
    return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
  }
}

@Component({
  ...
  imports: [EnumsToArrayPipe],
  template: `<div *ngFor="let item of roles | enumsToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
  roles = Role;
}

另请参见/sf/answers/2502517671/

Answer 4

经过对其他答案的进一步研究和回顾,我现在可以为我的问题制定答案.我认为只有在组件中没有代码支持的情况下才能使用*ngFor迭代枚举.代码支持可以包含构造函数代码,它将Enum转换为某种类型的数组,或者我们可以创建一个执行类似操作的自定义管道.

Answer 5

我需要做同样的事情,也许这就是你想要的.
更多DRY,它也可以使用module.

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

export namespace Role {

  export function keys(): Array<string>{
    var keys = Object.keys(Role);
    return keys.slice(keys.length / 2, keys.length-1);
  }
}

切片之前的对象输出

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

typescript合并了两个声明,因此 keys.lenght-1

和ngFor:

<div *ngFor="let role of Roles.keys()">{{ role }}</div>

更多信息:
打字稿的声明合并

基于:
TypeScript:将函数添加到枚举 https://basarat.gitbooks.io/typescript/content/docs/enums.html(在枚举章的末尾.)

Answer 6

export enum Priority {
  LL = 1,   // VERY LOW
  L = 2,    // LOW
  N = 3,    // NORMAL
  U = 4,    // HIGH
  UU = 5    // VERY HIGH
}

您的角度component.ts：

import { Priority } from './../shared/core/config/datas.config';

@Component({
  selector: 'app-yourcomponent',
  template: `
    <ng-container *ngFor="let p of getPriority">
       <div> {{p.key}} / {{p.value}} </div>
    </ng-container> 
  `
})

export class YourComponent {
  getPriority = this.getENUM(Priority);

  getENUM(ENUM:any): string[] {
    let myEnum = [];
    let objectEnum = Object.keys(ENUM);
    const values = objectEnum.slice( 0 , objectEnum.length / 2 );
    const keys = objectEnum.slice( objectEnum.length / 2 );

    for (let i = 0 ; i < objectEnum.length/2 ; i++ ) {
      myEnum.push( { key: keys[i], value: values[i] } ); 
    }
    return myEnum;
  }
}

Answer 7

使用管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'enum'
})
export class EnumSelectPipe implements PipeTransform {
  transform(value: any): [number, string][] {
    return Object.keys(value).filter(t => isNaN(+t)).map(t => [value[t], t]);
  }
}

并在模板中：

<mat-select formControlName="type" placeholder="Package Type">
  <mat-option *ngFor="let pType of PackageTypes | enum" [value]="pType[0]">{{ pType[1] | title}}</mat-option>
</mat-select>