选择基于Angular2中的枚举

Question

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

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

我想在我的表单中构建一个select,每个选项的枚举整数值为value,枚举文本为label,如下所示:

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

我怎样才能做到这一点 ？

Answer 1

如果您不想创建新管道,还有一个解决方案.您还可以将密钥提取到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

Answer 2

更新

代替 pipes: [KeysPipe]

使用

@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 | enumsToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
  roles = Role;
}

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

原版的

使用/sf/answers/2487523671/中的keys管道

我不得不修改管道以使其与枚举一起正常工作(另请参阅如何获取TypeScript枚举条目的名称？)

@NgModule({
  ...
  imports: [SharedModule],
})

Plunker

另请参见如何使用*ngFor with Object？

Answer 3

对于Angular2 v2.0.0,这是一种非常简单的方法.为了完整起见,我已经包含了一个country通过反应形式设置选择的默认值的示例.

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

Answer 4

我更喜欢在我的Angular App上共享一个简单的实用程序函数,将其enum转换为标准数组以构建选择:

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

使用以下内容填充Component中的变量:

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>

谢谢你这个帖子!

Answer 5

另一个类似的解决方案,不会省略"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)));
  }
}

// ** NOTE: This enum contains 0 index **
export enum CountryCodeEnum {
   Unset = 0,
   US = 1,
   EU = 2
}

Answer 6

这个答案的另一个衍生，但这实际上将值映射为数字，而不是将它们转换为字符串，这是一个错误。它也适用于基于 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));;
  }
}