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

Posted

技术标签:

【中文标题】在角度中使用枚举来选择下拉菜单项【英文标题】:Use enum in angular to select drop menu item 【发布时间】:2019-05-10 04:08:30 【问题描述】:

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

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,
  ) 

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

编辑:我试过这个:

枚举:

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 个状态行。

【问题讨论】:

我不知道哪个部分阻止了你。看来你几乎完成了。请查看文档中的示例:angular.io/guide/dynamic-form#question-model。它可能会对你有所帮助。 你能告诉我如何在html代码中使用枚举吗? @PeterPenzov:你能告诉我merchanttypes是什么吗? 检查这个:***.com/questions/38554562/… 【参考方案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>

更新:

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

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

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

【讨论】:

谢谢,但我对“正在设置”键有几个词,并且您有 CSV。我该如何使用它? @PeterPenzov 你可以把这东西放到标签映射中,用简单的一字标识符作为枚举键,方便使用 我发现了一个错误。我在下拉列表中得到 4 个空行和 4 个值。您确定您的代码运行正常吗? @PeterPenzov 我不明白 whis 是什么意思“但是我得到了 4 个空行和 4 个状态行。”可以截图吗? @PeterPenzov 哦,我明白了。那是因为我通常使用字符串值枚举,而不是 1、2、3 你可以看到它们编译成不同的形状。 (我的链接太长,无法评论,所以我将其添加到答案中,单击运行并检查控制台)。所以你在声明public stateTypes =时必须考虑到这个形状【参考方案2】:

另一种使 Enum 成为下拉列表或选择列表的简单方法,

    定义枚举
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>

【讨论】:

以上是关于在角度中使用枚举来选择下拉菜单项的主要内容,如果未能解决你的问题,请参考以下文章

选择特定的下拉菜单项后,下拉按钮的值不会改变

在“方法/事件/枚举下拉菜单”中禁用分类

选择窗口下拉菜单项

多项选择 - 下拉菜单

如何在ul下拉菜单中显示选定的菜单项

如何使用 Selenium 和 Python 选择下拉菜单项(值或文本)? [复制]