使用 Angular 中的枚举来选择下拉菜单项

Answer 1

我通常分3步完成。

首先，声明一个单独的枚举以及从枚举值到标签的映射。这样，枚举值和标签稍后都可以在一个地方进行更改，而无需更改任何其他代码。

// FileTypes.enum.ts

export enum FileTypesEnum {
    CSV = "CSV",
    JSON = "JSON",
    XML = "XML",
}

// optional: Record type annotation guaranties that 
// all the values from the enum are presented in the mapping
export const FileType2LabelMapping: Record<FileTypesEnum, string> = {
    [FileTypesEnum.CSV]: "Here's Csv",
    [FileTypesEnum.JSON]: "Here's Json",
    [FileTypesEnum.XML]: "Here's Xml",
};

然后将它们导入到组件中并将它们粘贴到公共属性中，这样它们就可以在视图中使用：

// my.component.ts

import {FileTypesEnum, FileType2LabelMapping} from "../FileTypes.enum";

@Component({ ... })
export class MyComponent implements OnInit {
    public FileType2LabelMapping = FileType2LabelMapping;

    public fileTypes = Object.values(FileTypesEnum);

    constructor(){}
}

然后在视图中我正在对枚举的值执行 ngFor 并将它们映射到标签：

 <!-- my.component.html -->

 <select ...>
  <option *ngFor="let fileType of fileTypes"
          [value]="fileType">
    {{FileType2LabelMapping[fileType]}}
  </option>
</select>

更新：

字符串值和数字枚举编译为不同的对象 打字稿游乐场

所以看起来你必须另外过滤你的数组

public stateTypes = Object.values(MerchantStateType).filter(value => typeof value === 'number');

Answer 2

将 Enum 制作为下拉列表或选择列表的另一种简单方法，

1. 定义枚举

export enum ConditionalOperator {
    Equals="Equals",
    NEquals="NEquals", 
    GT="GT", 
    GTE="GTE", 
    LT="LT", 
    }

2. 在组件中将枚举分配给变量，并在构造函数中将所有枚举键分配给另一个定义的数组

    conditionalOperator = ConditionalOperator;
    enumKeys=[];
    
    constructor(private fb: FormBuilder) {
      this.enumKeys=Object.keys(this.conditionalOperator);
    }

3. 在 HTML 文件中，只需迭代枚举键即可分配值，如下所示，

    <select>
    <option value='' disabled selected>Operator</option>
    <option *ngFor="let name of enumKeys" [value]="name"> {{conditionalOperator[name]}} </option>
    </select>

Answer 3

如果有人使用NG-ZORRO模板。

按照上述解决方案[点击]，作者：@mramsath

那就试试这个：

更新构造函数或保持原样。我更新了获取值。

constructor(private fb: FormBuilder) {
      this.enumKeys=Object.values(this.conditionalOperator);
    }

主要部分如下：

<nz-select name="yourFormPostName" #yourFormPostName="ngModel" [(ngModel)]="data.yourFormPostName" nzPlaceHolder="Select Type" nzAllowClear style="width: 95%;">
<nz-option nzDisabled nzLabel="Select" nzValue="disabled"></nz-option>
<nz-option *ngFor="let name of enumKeys" [nzValue]="name" [nzLabel]="name"> </nz-option>
</nz-select>