selezione basata su enum in Angular2

Question

ho questo enum (sto usando dattiloscritto):

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

Vorrei costruire un selezionare nel mio modulo, con per ogni opzione il valore intero enum come valore, e il testo enum come etichetta, in questo modo:

<select> 
    <option value="1">France</option> 
    <option value="2">Belgium</option> 
</select> 

come posso fare questo?

Answer 1

aggiornamento

anziché pipes: [KeysPipe]

uso

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

@NgModule({ 
    ... 
    imports: [SharedModule], 
}) 

originale

Utilizzando il tubo keys da https://stackoverflow.com/a/35536052/217408

ho dovuto modificare il tubo un po 'per farlo funzionare correttamente con le enumerazioni (vedi anche How does one get the names of TypeScript enum entries?)

@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: ` 
    <select> 
    <option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option> 
    </select> 
` 
}) 
class MyComponent { 
    countries = CountryCodeEnum; 
} 

Plunker

Vedi anche How to use *ngFor with Object?

Answer 2

Un'altra soluzione se non si desidera creare una nuova pipa. Si potrebbe anche estrarre le chiavi in ​​proprietà aiutante e usarlo:

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <select> 
     <option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option> 
     </select> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 

    countries = CountryCodeEnum 

    constructor() { 
    this.keys = Object.keys(this.countries).filter(Number) 
    } 
} 

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

Answer 3

Ecco un modo molto semplice per Angular2 v2.0.0. Per completezza, ho incluso un esempio di impostazione di un valore predefinito di country selezionare tramite reactive forms.

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <select id="country" formControlName="country"> 
     <option *ngFor="let key of keys" [value]="key">{{countries[key]}}</option> 
     </select> 
    </div> 
    `, 
    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 
    } 
} 

Answer 4

ho preferito avere una semplice funzione di utilità condivisa in tutta la mia angolare App, per convertire il enum in una matrice standard per costruire seleziona:

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

per riempire una variabile nella componente con :

public countries = enumSelector(CountryCodeEnum); 

e quindi riempire il mio materiale Selezionare come i miei vecchi quelli a base di matrice:

<md-select placeholder="Country" [(ngModel)]="country" name="country"> 
    <md-option *ngFor="let c of countries" [value]="c.value"> 
    {{ c.title }} 
    </md-option> 
</md-select> 

Grazie per questa discussione!

Answer 5

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: ` 
    <select> 
    <option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option> 
    </select>`, 
    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 
} 

Answer 6

Con enumerazioni di stringhe puoi provare questo.

mio enum stringa ha la seguente definizione:

enum StatusEnum { 
     Published = <any> 'published', 
     Draft = <any> 'draft' 
    } 

e si traduce in js nel seguente modo:

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

ho un paio di questi nel mio progetto così creato la funzione piccolo aiuto nella un servizio condiviso lib:

@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 tuo componente constructor e Bi ND al vostro modello come questo:

In componente:

statusSelect; 

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

in Template:

<option *ngFor="let status of statusSelect" [value]="status.value"> 
     {{status.key}} 
    </option> 

Non dimenticare di aggiungere l'UtilsService alla matrice fornitore nel vostro app.module. così puoi facilmente iniettarlo in diversi componenti.

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