angular - enumeracion - qué es numeric enums typescript

¿Cómo puedo usar ngFor para iterar sobre Typescript Enum como una matriz de cadenas?

Question

Estoy usando Angular2 y Typscript. Tengo una enumeración:

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

Quiero usar * ngFor para iterar sobre la enumeración. ¿Cuál es la mejor manera de hacer esto? ¿Debo crear un tubo? ¿O hay una forma más sencilla?

Answer 1

Después de investigar y revisar las otras respuestas, ahora puedo formular una respuesta a mi pregunta. Creo que no es posible usar * ngFor para iterar sobre una enumeración sin algún soporte de código en el componente. El soporte de código puede consistir en un código de constructor que convierte el Enum en algún tipo de matriz o podemos crear un conducto personalizado que haga algo similar.

Answer 2

El ámbito de la plantilla es la instancia del componente. Si desea acceder a algo fuera de este ámbito, debe hacerlo disponible desde su instancia de componente:

@Pipe({name: ''keys''})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (var enumMember in value) {
      var isValueProperty = parseInt(enumMember, 10) >= 0
      if (isValueProperty) {
        keys.push({key: enumMember, value: value[enumMember]});
        // Uncomment if you want log
        // console.log("enum member: ", value[enumMember]);
      } 
    }
    return keys;
  }
}

@Component({
  ...
  pipes: [KeysPipe],
  template: `<div *ngFor="let item of roles | keys">{{item}}</div>`
})
class MyComponent {
  roles = Role;
}

Consulte también https://.com/a/35750252/217408

Answer 3

Necesitaba hacer lo mismo y tal vez esto es lo que querías.
Más seco y se puede utilizar con el module también.

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

la salida del objeto antes de la rebanada

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

mecanografiado combina las dos declaraciones de ahí las keys.lenght-1

y el ngFor :

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

más información:
Declaración de Typescript fusionando

Residencia en:
TypeScript: agregue funciones a un Enum https://basarat.gitbooks.io/typescript/content/docs/enums.html (al final del capítulo de enumeraciones ).

Answer 4

Tengo la enumeración:

export enum FileCategory {
  passport = ''Multipass'',
  agreement = ''Personal agreement'',
  contract = ''Contract'',
  photo = ''Self photos'',
  other = ''Other''
}

En el archivo ts del componente:

export class MyBestComponent implements OnInit {
  fileCategory = FileCategory;

  // returns keys of enum
  fileKeys(): Array<string> {
    const keys = Object.keys(this.fileCategory);
    return keys;
  }

  // returns values of enum
  fileVals(): Array<string> {
    const keys = Object.keys(this.fileCategory);
    return keys.map(el => Object(this.fileCategory)[el]);
  }

En la plantilla HTML muestre estos valores y claves de enumeración:

  <a *ngFor="let cat of fileVals()"
     (click)="addFileCategory(cat)">{{cat}}</a>
  <a *ngFor="let cat of fileKeys()"
     (click)="addFileCategory(cat)">{{cat}}</a>

Answer 5

Una enumeración es sólo un objeto.

Su enumeración se escribe algo como esto en 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
}

Así que puedes plnkr esta manera ( 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);
    }
}

O sería mejor crear tubería personalizada :

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

Example

Actualizar

Typescript 2.4 permite a los miembros de la enumeración contener inicializadores de cadena como:

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

en este caso, simplemente puede devolver Object.keys(data); de la tubería.

Answer 6

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

Su componente angular.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;
  }
}