基于Angular2中的枚举选择

Question

我有这个枚举（我正在使用 TypeScript ）：

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

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

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

我怎样才能做到这一点 ？

原文由 AdrienTorris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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/217408 的 keys 管道

我不得不稍微修改管道以使其与枚举正常工作（另请参阅 如何获取枚举条目的名称？ ）

 @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 迭代对象键？

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

export enum Unit
{
    Kg = 1,
    Pack,
    Piece,
    Litre
}

//带地图

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {

  transform(enumObj: Object) {

    const keys = Object.keys(enumObj).filter(key => parseInt(key));
    let map = new Map<string, string>();
    keys.forEach(key => map.set(key, enumObj[key]))
    console.log( Array.from(map));
    return Array.from(map);
  }

}

//带集合

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'enumToArray'
    })
    export class EnumToArrayPipe implements PipeTransform {

      transform(enumObj: Object) {

        const keys = Object.keys(enumObj).filter(key => parseInt(key));
        let set = new Set();
        keys.forEach(key => set.add({ key: parseInt(key), value: enumObj[key] }))
        return Array.from(set);
      }

    }

原文由 Sandip Shelke 发布，翻译遵循 CC BY-SA 4.0 许可协议