在角度中使用枚举来选择下拉菜单项
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:你能告诉我merchant
和types
是什么吗?
检查这个:***.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>
【讨论】:
以上是关于在角度中使用枚举来选择下拉菜单项的主要内容,如果未能解决你的问题,请参考以下文章