typescript - values - Selecione com base no enum em Angular2




template driven validation (6)

A partir do Angular 6.1 e acima, você pode usar o KeyValuePipe integrado, como mostrado abaixo (colado de angular.io docs).

Eu estou supondo que um enum contém cordas legíveis amigáveis ​​humanos, claro :)

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

https://code.i-harness.com

Eu tenho esse enum (estou usando o TypeScript ):

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

Eu gostaria de construir um select no meu formulário , com para cada opção o valor inteiro enum como valor, e o texto enum como label, assim:

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

Como posso fazer isso ?


Aqui está uma maneira muito simples para o Angular2 v2.0.0. Para completar, incluí um exemplo de configuração de um valor padrão do country selecionado por meio de formulários reativos .

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

Eu preferi ter uma função de utilidade simples compartilhada em meu Angular App, para converter o enum em uma matriz padrão para construir seleções:

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

para preencher uma variável no componente com:

public countries = enumSelector(CountryCodeEnum);

e, em seguida, preencha meu Material Select como os meus antigos baseados em matriz:

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

Obrigado por esta discussão!


Mais uma solução se você não quiser criar um novo pipe. Você também pode extrair chaves na propriedade de ajuda e usá-la:

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

Demonstração: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview


Outro spin off desta resposta, mas isso realmente mapeia os valores como números, em vez de convertê-los em seqüências de caracteres que é um bug. Ele também funciona com enums baseados em 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));;
  }
}

Esta é a melhor opção que você pode aplicar sem nenhum cano ou código extra.

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];

  }
}






angular2-forms