typescript - Výber na základe enum v Angular2

Mám tento enum (používam TypeScript) :

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

Chcel by som zostaviť výber vo svojom formulári, pričom pre každú možnosť bude celá číslica výčtu ako hodnota a text výčtu ako označenie, takto:

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

Ako to môžem urobiť?

Odpoveď č. 1

Ešte jedno riešenie, ak nechcete vytvárať novú rúru. Môžete tiež extrahovať kľúče do pomocnej vlastnosti a použiť ju:

@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(k => !isNaN(Number(k)));
  }
}

Ukážka: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

Upraviť:

ak potrebujete možnosti ako čísla namiesto reťazcov:

  • nahraďte [value] s [ngValue]
  • pridajte .map(Number) za .filter(...)

Odpoveď č. 2

update2 zjednodušené vytvorením poľa

@Pipe({name: 'enumToArray'})
export class EnumToArrayPipe implements PipeTransform {
  transform(value) : Object {
    return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
  }
}

@Component({
  ...
  imports: [EnumsToArrayPipe],
  template: `<div *ngFor="let item of roles | enumToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
  roles = Role;
}

aktualizácia

namiesto pipes: [KeysPipe]

použiť

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

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

originál

Použitie rúry keys z https://stackoverflow.com/a/35536052/217408

Musel som trošku upraviť rúrku, aby správne fungovala s výčtami (pozri tiež Ako získať názvy položiek výčtu?)

@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

Pozrite si tiež Ako iterovať kľúče objektu pomocou *ngFor?

Odpoveď č. 3

Tu je veľmi priamy spôsob pre Angular2 v2.0.0. Pre úplnosť som zahrnul príklad nastavenia predvolenej hodnoty výberu country prostredníctvom reaktívnych formulárov.

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

Odpoveď č. 4

Uprednostnil som mať jednoduchú utilitnú funkciu zdieľanú naprieč mojou Angular aplikáciou, na prevod enum do štandardného poľa na vytváranie selectov:

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

vyplniť premennú v Komponente s:

public countries = enumSelector(CountryCodeEnum);

a potom vyplň môj výber materiálu ako moje staré pole založené na poliach:

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

Ďakujem za tento vláknový príspevok!

Odpoveď č. 5

Ďalšie podobné riešenie, ktoré nevynecháva "0" (ako "Unset"). Použitie filtra Number podľa môjho názoru nie je dobrý prístup.

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

Súvisiace články