如何在Angular应用程序的HTML选择/下拉中填充枚举字符串或数字

枚举是一个常数的集合。

有时，我们有一个枚举对象，需要在angular应用程序的选择/下拉中提取所有枚举值。

本教程将逐步介绍从enum常量中提取angular下拉值的教程。

让我们为这个例子在typescript中声明枚举类型。

export enum Weeks {
  MONDAY = 1,
  TUESDAY= 2,
  WEDNESDAY = 3,
  THURSDAY = 4,
  FRIDAY = 5,
  SATURDAY= 6,
  SUNDAY= 7,
}

这篇文章将告诉你如何在Angular应用程序的HTML选择/下拉中填充枚举字符串或数字:

• 使用枚举数据类型的Angular材料下拉菜单
• 使用枚举值的Html选择

基于枚举值的Angular材料下拉菜单

如上所述，在你的应用程序中安装Angular material npm

npm install @angular/material@13.0.2
npm install @angular/code@13.0.2

这将在package.json中添加以下条目作为依赖关系

"@angular/material":"13.0.2",
"@angular/cdk":"13.0.2",

将MatSelectModule 导入到你的模块中MatSelectModule 包含选择下拉相关的类和指令，可以在angular组件中使用。

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { MatSelectModule } from "@angular/material/select";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, MatSelectModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Enum objects打印出Weeks 对象的以下数据格式enum

{
  '1': 'MONDAY',
  '2': 'TUESDAY',
  '3': 'WEDNESDAY',
  '4': 'THURSDAY',
  '5': 'FRIDAY',
  '6': 'SATURDAY',
  '7': 'SUNDAY',
  MONDAY: 1,
  TUESDAY: 2,
  WEDNESDAY: 3,
  THURSDAY: 4,
  FRIDAY: 5,
  SATURDAY: 6,
  SUNDAY: 7
}

在Typescript组件代码中，Enum ，使用object keys method 。这个方法过滤枚举的数字，只返回字符串来填充到下拉菜单中。同样的逻辑也可以写在构造函数中。

我们还为change1()方法准备了一个事件处理程序，用于跟踪下拉菜单中的选定值。

import { Component } from "@angular/core";
import { Weeks } from "./Weeks";
import { FormGroup, FormControl } from "@angular/forms";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  week1 = null;
  weeks = Weeks;
  enumKeys = [];
  constructor() {
    this.enumKeys = Object.keys(this.weeks).filter(f => !isNaN(Number(f)));
  }
    change1(value: string) {
    this.week1 = this.weeks[value];
  }
}

HTML模板组件

在HTML模板中，mat-select被用于下拉。

mat-option 添加了 指令来迭代Enum对象的键 ，用于从组件到视图的双向绑定，以选择下拉值。ngFor ngModel

<mat-form-field>
  <mat-select placeholder="Select Week" [(ngModel)]="week1">
    <mat-option *ngFor="let name of enumKeys" [value]="name">
      {{weeks[name]}}
    </mat-option>
  </mat-select>
</mat-form-field> <br/><br/>
<br>
Selected value is {{week1}}
  

如何选择枚举数据的下拉值

同样可以使用typescript组件。

并使用普通的select 标签的HTML模板。

在普通的HTML select上应用ngFor 指令来迭代所有的enumKeys

<div>
  <select (change)="change($event.target.value)">
    <option>Please Select Week</option>
    <option *ngFor="let name of enumKeys"
        [value]="name">{{weeks[name]}}</option>
  </select>
</div>