typescript – 根据Angular2中的枚举选择

前端之家收集整理的这篇文章主要介绍了typescript – 根据Angular2中的枚举选择前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个枚举(我使用的是TypeScript):
  1. export enum CountryCodeEnum {
  2. France = 1,Belgium = 2
  3. }

我想在我的表单中构建一个选择,对于每个选项,枚举整数值作为值,枚举文本作为标签,如下所示:

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

我该怎么做?

更新

而不是管道:[KeysPipe]

使用

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

原版的

使用http://stackoverflow.com/a/35536052/217408

我不得不修改一下管道,使其正常工作与枚举
(另见How does one get the names of TypeScript enum entries?)

  1. @Pipe({name: 'keys'})
  2. export class KeysPipe implements PipeTransform {
  3. transform(value,args:string[]) : any {
  4. let keys = [];
  5. for (var enumMember in value) {
  6. if (!isNaN(parseInt(enumMember,10))) {
  7. keys.push({key: enumMember,value: value[enumMember]});
  8. // Uncomment if you want log
  9. // console.log("enum member: ",value[enumMember]);
  10. }
  11. }
  12. return keys;
  13. }
  14. }
  15.  
  16. @Component({ ...
  17. pipes: [KeysPipe],template: `
  18. <select>
  19. <option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option>
  20. </select>
  21. `
  22. })
  23. class MyComponent {
  24. countries = CountryCodeEnum;
  25. }

Plunker

参见How to use *ngFor with Object?

猜你在找的Angularjs相关文章