select基于Angular2中的枚举

我有这个枚举(我正在使用TypeScript ):

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

我想build立一个select在我的forms ,每个选项枚举整数值作为价值,枚举文本作为标签,如下所示:

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

我该怎么做?

更新

而不是pipes: [KeysPipe]

使用

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

原版的

https://stackoverflow.com/a/35536052/217408使用;keyspipe道

我不得不修改pipe道一点,以使其与枚举正常工作(另请参阅如何得到TypeScript枚举项的名称? )

 @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

另请参见如何使用* ngFor与对象?

如果您不想创build新的pipe道,还有一个解决scheme。 您也可以将键提取到助手属性中并使用它:

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

演示: http : //plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

这是Angular2 v2.0.0的一个非常简单的方法。 为了完整起见,我列举了一个通过反应forms设置countryselect默认值的例子。

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

另一个类似的解决scheme, 不会省略“0” (如“Unset”)。 使用filter(号码)恕我直言,不是一个好方法。

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

我更喜欢在我的Angular App中共享一个简单的实用程序function,将enum转换为标准数组来构buildselect:

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

在组件中填充一个variables:

 public countries = enumSelector(CountryCodeEnum); 

然后填写我的材料select为我的旧的数组为基础的:

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

感谢这个线程!

用string枚举你可以试试这个。

我的string枚举有以下定义:

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

并按以下方式转换为js:

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

我在我的项目中有一些这样创build一个共享服务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; } } 

初始化你的组件构造函数,并将其绑定到你的模板,如下所示:

在组件中:

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

在模板中:

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

不要忘了将UtilsService添加到app.module.ts中的提供者数组中,以便您可以轻松地将其注入到不同的组件中。

我是一个打字新手,所以请纠正我,如果我错了,或者如果有更好的解决scheme。

Interesting Posts