首页 文章

选择基于Angular2中的枚举

提问于
浏览
58

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

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

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

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

我怎样才能做到这一点 ?

8 回答

  • 45

    update

    而不是 pipes: [KeysPipe]

    使用

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

    original

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

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

    @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

    另见How to use *ngFor with Object?

  • 7

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

    Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

  • 1

    对于Angular2 v2.0.0,这是一种非常简单的方法 . 为了完整起见,我已经包含了一个通过reactive forms设置 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
      }
    }
    
  • 2

    另一个类似的解决方案, that does not omit "0" (如"Unset") . 使用过滤器(数字)恕我直言不是一个好方法 .

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

    我更喜欢在我的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>
    

    谢谢你这个帖子!

  • 6

    从Angular 6.1及更高版本开始,您可以使用下面的内置 KeyValuePipe (粘贴自angular.io docs) .

    我假设enum包含人类友好的可读字符串当然:)

    @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']]);
    }
    
  • 1

    使用字符串枚举,您可以尝试这个 .

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

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

    并通过以下方式转换为js:

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

    我在我的项目中有一些这样的,所以在共享服务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中的提供者数组中,以便您可以轻松地将其注入不同的组件中 .

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

  • 45

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

相关问题