Sélectionnez en fonction de la enum dans Angular2

mise à jour

au lieu de pipes: [KeysPipe]

utilisation

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

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

original

À l'aide de la keys tuyau de https://stackoverflow.com/a/35536052/217408

J'ai dû modifier la pipe un peu pour le faire fonctionner correctement avec les énumérations
(voir aussi Comment obtenir les noms de fichier d'enregistrement enum entrées?)

@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

Voir aussi Comment l'utiliser *ngFor avec l'Objet?

Voici une manière très simple pour Angular2 v2.0.0. Par souci d'exhaustivité, j'ai inclus un exemple de définition d'une valeur par défaut de la country sélectionnez via formes réactives.

@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
  }
}

Une autre solution similaire, qui n'omettez pas d' "0" (comme "Annuler"). Utilisation du filtre(Nombre) à mon humble avis n'est pas une bonne approche.

@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
}

Avec de la ficelle les énumérations, vous pouvez essayer cette.

Ma chaîne enum a la définition suivante:

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

et se traduit par js de la manière suivante:

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

J'ai un peu de ces dans mon projet petites fonction d'assistance dans un service partagé 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 dans votre composant constructeur et le Lier à votre modèle comme celui-ci:

En composant:

    statusSelect;

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

Modèle:

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

N'oubliez pas d'ajouter le UtilsService pour le fournisseur de tableau dans votre application.le module.ts de sorte que vous pouvez facilement l'injecter dans les différentes composantes.

Je suis un tapuscrit newbie, donc s'il vous plaît corrigez-moi si je me trompe ou si il y a de meilleures solutions.

C'est la meilleure option que vous pouvez appliquer sans tuyaux ou de code supplémentaire.

import { Component } from '@angular/core';

 enum AgentStatus {
    available =1 ,
    busy = 2,
    away = 3,
    offline = 0
}


@Component({
  selector: 'my-app',
  template: `
  <h1>Choose Value</h1>

  <select (change)="parseValue($event.target.value)">
    <option>--select--</option>
    <option *ngFor="let name of options"
        [value]="name">{{name}}</option>
  </select>

  <h1 [hidden]="myValue == null">
    You entered {{AgentStatus[myValue]}}

  </h1>`
})
export class AppComponent { 


  options : string[];
  myValue: AgentStatus;
  AgentStatus : typeof AgentStatus = AgentStatus;

  ngOnInit() {
    var x = AgentStatus;
    var options = Object.keys(AgentStatus);
    this.options = options.slice(options.length / 2);
  }

  parseValue(value : string) {
    this.myValue = AgentStatus[value];

  }
}