Wybierz na podstawie enum w Angular2

Jeszcze jedno rozwiązanie, jeśli nie chcesz tworzyć nowej rury. Można również wyodrębnić Klucze do właściwości helper i użyć jej:

@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

Oto bardzo prosty sposób na Angular2 v2.0.0. Dla kompletności zamieściłem przykład ustawienia domyślnej wartości countryselect poprzez formularze reaktywne.

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

Wolałem mieć prostą funkcję użytkową współdzieloną w mojej aplikacji Angular, aby przekonwertować enum na standardową tablicę do budowania wyborów:

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

Aby wypełnić zmienną w składniku:

public countries = enumSelector(CountryCodeEnum);

A następnie wypełnij mój materiał wybierz jako mój stary TABLICOWY:

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

Dzięki za ten wątek!

Inne podobne rozwiązanie, , które nie pomija "0" (Jak "Unset"). Używanie filtra (liczby) IMHO nie jest dobrym podejściem.

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

Z enumami ciągów możesz spróbować tego.

Mój ciąg enum ma następującą definicję:

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

I tłumaczy się na js w następujący sposób:

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

Mam kilka z nich w moim projekcie, więc stworzyłem małą funkcję helpera w lib usługi współdzielonej:

   @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 w konstruktorze komponentu i powiązaj go z szablonem w następujący sposób:

W składniku:

    statusSelect;

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

W szablonie:

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

Nie zapomnij dodać UtilsService do tablicy provider w aplikacji.moduł.ts, dzięki czemu można go łatwo wstrzyknąć w różnych komponentach.

Jestem początkującym maszynopisem, więc proszę mnie poprawić, jeśli się mylę lub jeśli są lepsze rozwiązania.

Kolejny spin off tej odpowiedzi, ale to faktycznie mapuje wartości jako liczby, zamiast konwertować je na ciągi znaków, co jest błędem. Działa również z enumami bazującymi na 0

@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)))
                      .map(k => parseInt(k));;
  }
}