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