根据Angular2中的枚举选择

77

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

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

我想在表单中构建一个select，对于每个选项，将枚举整数值作为value，并将枚举文本作为label，如下所示：

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

我怎样才能做到这一点 ？

typescript  angular  angular2-forms 
— 阿德里安·托里斯（AdrienTorris）
source

Answers:

61

通过创建数组简化了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],
})

原版的

使用keys来自https://stackoverflow.com/a/35536052/217408的管道

我必须稍微修改一下管道，以使其与枚举一起正常工作（另请参见如何获取枚举条目的名称？）

@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ünterZöchbauer）
source
2
我将在顺序绑定中再添加一个更改到工作键。
— Mihail
@Component({ imports:; EnumToArrayPipe！= EnumToArrayPipes;-)
— Martin Schneider
63

如果您不想创建新管道，则还有一个解决方案。您还可以将键提取到helper属性中并使用它：

@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(...)
— dfsq
source
1
我没有在下拉列表中看到标签，因此将选项行更改为： <option *ngFor="#key of keys" [value]="key">{{countries[key]}}</option>
— Hans Beemsterboer
23
如果您的枚举以0开头，则它将不起作用。最好使用：Object.keys（CountryCodeEnum）.filter（k =>！isNaN（Number（k）））;
— 奥列格
1
如果枚举以0开头，这是不好的方法。如果Object.keys（this.countries）返回[“ 0”，“ 1”，“ 2”，“ NotSet”，“ EU”，“ US”]，则过滤器将省略“ 0”，因此过滤后的结果将是[“ 1”，“ 2”]。不像我期望的那样[[0“，” 1“，” 2“]。
— Tomino
1
除了@Oleg的修改之外，我建议追加.map(Number)以得到number[]回报。这是为了避免将属性绑定到key并将组件number（而不是string）重新绑定到组件中的任何问题。
— Dillon Ryan Redding
20

这是Angular2 v2.0.0的非常简单的方法。为了完整起见，我提供了一个示例，该示例country通过反应形式设置select的默认值。

@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
  }
}
— 黑猩猩
source
您需要按照建议的dfsq过滤掉一半的值：Object.keys（this.countries）.filter（Number）;
— AFD
1
如果枚举以0开头，这是不好的方法。如果Object.keys（this.countries）返回[“ 0”，“ 1”，“ 2”，“ NotSet”，“ EU”，“ US”]，则过滤器将省略“ 0”，因此过滤后的结果将是[“ 1”，“ 2”]。不像我期望的那样[[0“，” 1“，” 2“]。
— Tomino
人们似乎忘记了将值映射回数字，然后再将其用于下面
— johnny
13

我更喜欢在Angular App中共享一个简单的实用程序功能，以将转换enum为标准数组以构建选择：

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

用以下命令填充组件中的变量：

public countries = enumSelector(CountryCodeEnum);

然后填充我的“材质选择”作为基于旧数组的材质选择：

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

感谢您的支持！

— 马泰奥·蒂巴奎拉（Mateo Tibaquira）
source
您的CountryCodeEnum是什么样的？
— phhbr
@phhbr我想我使用了非数值，例如：export enum CountryCodeEnum { France = '1', Belgium = '2' }
— Mateo Tibaquira
使用您的枚举时，CountryCodeEnum的对象看起来像这样：[1：“ France”，2：“ Belgium”，France：1，Undefined：2，]
— phhbr
7

另一个类似的解决方案，它不省略“ 0”（例如“ Unset”）。使用filter（Number）恕我直言不是一个好方法。

@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
}
— 富野
source
非常感谢！这有所帮助
— Bellash
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']]);
}
展开摘要

— 塞缪尔·R
source
3

此答案的另一个衍生形式，但这实际上将值映射为数字，而不是将它们转换为字符串，这是一个错误。它也适用于基于0的枚举

@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)))
                      .map(k => parseInt(k));;
  }
}
— 约翰尼5
source
1

使用字符串枚举，您可以尝试此操作。

我的字符串枚举具有以下定义：

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

并以以下方式转换为js：

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

我的项目中有一些，因此在共享服务库中创建了小助手功能：

   @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中的provider数组中，以便您可以轻松地将其注入到不同的组件中。

我是打字稿新手，所以如果我错了或者有更好的解决方案，请纠正我。

— 克里斯托弗
source
我必须删除偶数/奇数索引上的过滤器才能正常工作
— reggaeguitar
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];

  }
}
— 尼米什·戈尔
source
0

Angular 6.1.10 / Typescript的另一个解决方案...

 enum Test {
   No,
   Pipe,
   Needed,
   Just,
   Use,
   Filter
 }

 console.log('Labels: ');
 let i = 0;
 const selectOptions = [
    ];
 Object.keys(Test).filter(key => !Number(key) && key !== '0').forEach(key => {
    selectOptions.push({position: i, text: key});
    i++;
  });
 console.log(selectOptions);

这将打印：

Console:
Labels: 
    (6) [{…}, {…}, {…}, {…}, {…}, {…}]
    0: {position: 0, text: "No"}
    1: {position: 1, text: "Pipe"}
    2: {position: 2, text: "Needed"}
    3: {position: 3, text: "Just"}
    4: {position: 4, text: "Use"}
    5: {position: 5, text: "Filter"}
— 斯蒂芬·B
source
0 
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）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.