更新：

Question

我想实现选择菜单，该菜单使用枚举数据来显示数据和基于所选字符串的保存的数字：

HTML代码：

<div class="form-group state_raw">
    <label for="state_raw">State</label>
    <select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
      <option selected></option>
      <option [value]="type" *ngFor="let type of types">{{type | formatType}}</option>
    </select>
  </div>

显示数据和转换后的数字值的枚举：

export enum MerchantStatusType {
  'Being set up' = 1,
  'Live for processing' = 2,
  'Trading suspended' = 3,
  'Account suspended' = 4
}

用于选择菜单的对象：

export class MerchantNew {
  constructor(
    public name: string,
    public address_state: string,
  ) {}
}

如何实现？我想显示字符串，但是将数字保存到数据库中？

编辑：我尝试过：

ENUM：

export enum MerchantStateType {
  being_set_up = 1,
  live_for_processing = 2,
  trading_suspended = 3,
  account_suspended = 4,
}

export const MerchantStateType2LabelMapping = {
  [MerchantStateType.being_set_up]: "Being set up",
  [MerchantStateType.live_for_processing]: "Live for processing",
  [MerchantStateType.trading_suspended]: "Trading suspended",
  [MerchantStateType.account_suspended]: "Account suspended",
}

组件：

public MerchantStateType2LabelMapping = MerchantStateType2LabelMapping;

public stateTypes = Object.values(MerchantStateType);

HTML代码：

<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
      <!--<option selected></option>-->
      <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option>

但是我得到4个空行和4行状态。

Answer 1

我通常分三步进行。

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

// 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>

更新：

字符串值和数字枚举可编译为不同的对象 Typescript Playground

因此，您似乎必须额外过滤数组

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

Answer 2

使枚举成为下拉列表或选择列表的另一种简单方法，

定义枚举

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

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

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

在HTML文件中，简单地通过枚举键进行迭代是如下的赋值，

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

使用角度枚举选择下拉菜单项

2 个答案:

更新：