89

私はこの列挙型を持っています（私はTypeScriptを使用しています）：

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

次のように、各オプションの列挙型整数値を値として、列挙型テキストをラベルとして、フォームに選択を作成したいと思います。

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

これどうやってするの ？

4

11 に答える 11

72

新しいパイプを作成したくない場合は、もう 1 つの解決策があります。キーをヘルパー プロパティに抽出して使用することもできます。

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

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

編集：

オプションを文字列ではなく数値として指定する必要がある場合:

  • [value]と置き換えます[ngValue]
  • .map(Number)後に追加.filter(...)
于 2016-03-02T15:11:02.177 に答える
70

配列を作成することでupdate2を簡素化

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

アップデート

それ以外のpipes: [KeysPipe]

使用する

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

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

オリジナル

https://stackoverflow.com/a/35536052/217408keysのパイプを使用する

列挙型で適切に動作するように、パイプを少し変更する必要がありました (列挙型エントリの名前を取得する方法も参照してください) 。

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

プランカー

*ngFor を使用してオブジェクト キーを反復処理する方法も参照してください。

于 2016-03-02T14:38:19.530 に答える
4

Angular 6.1 以降では、以下のようなビルトインを使用できKeyValuePipeます (angular.io ドキュメントから貼り付け)。

もちろん、列挙型には人間に優しい読み取り可能な文字列が含まれていると想定しています:)

@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']]);
}

于 2018-12-03T08:19:55.260 に答える
0

これは、パイプや追加のコードなしで適用できる最良のオプションです。 

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

  }
}
于 2019-04-12T06:17:55.643 に答える