Seleziona in base a enum in Angular2

Ho questo enum (sto usando TypeScript ):

export enum CountryCodeEnum { France = 1, Belgium = 2 } 

Vorrei creare una selezione nel mio modulo , con per ogni opzione il valore intero enum come valore e il testo enum come etichetta, come questo:

  France Belgium  

Come posso fare questo ?

aggiornare

invece di pipes: [KeysPipe]

uso

 @NgModule({ declarations: [KeysPipe], exports: [KeysPipe], } export class SharedModule{} 
 @NgModule({ ... imports: [SharedModule], }) 

originale

Utilizzando la pipe keys da https://stackoverflow.com/a/35536052/217408

Ho dovuto modificare un po ‘la pipe per farlo funzionare correttamente con le enumerazioni (vedi anche Come si ottengono i nomi delle voci enum di TypeScript? )

 @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (var enumMember in value) { if (!isNaN(parseInt(enumMember, 10))) { keys.push({key: enumMember, value: value[enumMember]}); // Uncomment if you want log // console.log("enum member: ", value[enumMember]); } } return keys; } } @Component({ ... pipes: [KeysPipe], template: `  ` }) class MyComponent { countries = CountryCodeEnum; } 

Plunker

Vedi anche Come usare * ngFor con Object?

Un’altra soluzione se non vuoi creare una nuova pipa. Puoi anche estrarre le chiavi nella proprietà helper e usarla:

 @Component({ selector: 'my-app', providers: [], template: ` 
`, directives: [] }) export class App { countries = CountryCodeEnum constructor() { this.keys = Object.keys(this.countries).filter(Number) } }

Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

Ecco un modo molto semplice per Angular2 v2.0.0. Per completezza, ho incluso un esempio di impostazione di un valore predefinito del country selezionato tramite moduli reattivi .

 @Component({ selector: 'my-app', providers: [], template: ` 
`, directives: [] }) export class App { keys: any[]; countries = CountryCodeEnum; constructor(private fb: FormBuilder) { this.keys = Object.keys(this.countries).filter(Number); this.country = CountryCodeEnum.Belgium; //Default the value } }

Ho preferito avere una semplice funzione di utilità condivisa attraverso la mia Angular App, per convertire l’ enum in una matrice standard per la costruzione di select:

 export function enumSelector(definition) { return Object.keys(definition) .map(key => ({ value: definition[key], title: key })); } 

per riempire una variabile nel componente con:

 public countries = enumSelector(CountryCodeEnum); 

e quindi riempire il mio materiale Select come miei vecchi array based:

   {{ c.title }}   

Grazie per questa discussione!

Un’altra soluzione simile, che non omette “0” (come “Unset”). Utilizzo del filtro (numero) IMHO non è un buon approccio.

 @Component({ selector: 'my-app', providers: [], template: ` `, directives: [] }) export class App { countries = CountryCodeEnum; constructor() { this.keys = Object.keys(this.countries).filter(f => !isNaN(Number(f))); } } // ** NOTE: This enum contains 0 index ** export enum CountryCodeEnum { Unset = 0, US = 1, EU = 2 } 

Con enumerazione delle stringhe puoi provarlo.

La mia stringa enum ha la seguente definizione:

  enum StatusEnum { Published =  'published', Draft =  'draft' } 

e si traduce in js nel modo seguente:

  { Published: "published", published: "Published", Draft: "draft", draft: "Draft" } 

Ne ho alcuni di questi nel mio progetto, quindi ho creato una piccola funzione di supporto in una lib di servizi condivisi:

  @Injectable() export class UtilsService { stringEnumToKeyValue(stringEnum) { const keyValue = []; const keys = Object.keys(stringEnum).filter((value, index) => { return !(index % 2); }); for (const k of keys) { keyValue.push({key: k, value: stringEnum[k]}); } return keyValue; } } 

Init nel costruttore del componente e Legalo al modello in questo modo:

Nel componente:

  statusSelect; constructor(private utils: UtilsService) { this.statusSelect = this.utils.stringEnumToKeyValue(StatusEnum); } 

Nel modello:

   

Non dimenticare di aggiungere UtilsService all’array del provider nel tuo app.module.ts in modo da poterlo facilmente inserire in diversi componenti.

Sono un principiante typescript quindi per favore correggimi se sbaglio o se ci sono soluzioni migliori.

Un altro spin off di questa risposta, ma in realtà questo mappa i valori come numeri, invece di convertirli in stringhe che sono un bug. Funziona anche con le enumerazioni basate su 0

 @Component({ selector: 'my-app', providers: [], template: ` `, directives: [] }) export class App { countries = CountryCodeEnum; constructor() { this.keys = Object.keys(this.countries) .filter(f => !isNaN(Number(f))) .map(k => parseInt(k));; } }