如何在Dropdown下拉框中显示Enum枚举文本值并将选中值传到后端

步骤1：组件层预处理枚举数据 #

TypeScript数字枚举默认会生成双向映射（既存在Task:0的正向映射，也存在0:'Task'的反向映射），直接遍历枚举会同时拿到数字键和文本键，导致下拉框显示异常，需要先预处理枚举生成可选列表：

import { TaskCategory } from './你的枚举文件路径';
import { FormGroup, FormControl } from '@angular/forms';

export class 你的组件类 {
  // 把枚举暴露给模板
  TaskCategory = TaskCategory;
  addTaskForm: FormGroup; // 你的原有表单定义，此处省略其他表单逻辑

  // 预处理枚举选项，仅保留文本标签和对应枚举值
  taskCategoryOptions = Object.keys(TaskCategory)
    .filter(key => isNaN(Number(key))) // 过滤掉数字键，只保留文本类型的键
    .map(key => ({
      label: key, // 下拉框显示的文本：Task、Bug
      value: TaskCategory[key as keyof typeof TaskCategory] // 枚举对应的数值：0、1
    }));

  // 表单提交逻辑
  onSubmit() {
    if (this.addTaskForm.valid) {
      const submitData = this.addTaskForm.value;
      // submitData.taskcategory 就是选中的枚举值，直接作为接口参数传给后端即可
      // 此处写你的接口请求逻辑
    }
  }
}

步骤2：修改模板下拉框代码 #

替换原有下拉框的遍历逻辑，绑定预处理好的选项列表：

<div class="form-group">
  <label class="col-form-label">Task Category <span class="text-danger">*</span></label>
  <select class="select form-control" 
    [class.invalid]="addTaskForm.get('taskcategory').invalid && addTaskForm.get('taskcategory').touched"
    formControlName="taskcategory">
    <option value="00000000-0000-0000-0000-000000000000">Select Task Category</option>
    <!-- 遍历预处理好的选项，显示枚举文本，绑定枚举值 -->
    <option *ngFor="let option of taskCategoryOptions" [value]="option.value">
      {{option.label}}
    </option>
  </select>
  <div *ngIf="addTaskForm.get('taskcategory').invalid && addTaskForm.get('taskcategory').touched">
    <small class="text-danger"> *Task Category is required</small>
  </div>
</div>

后端传值说明 #

• 上述实现中，表单控件taskcategory的值为选中项对应的枚举数字值（选中Task返回0，选中Bug返回1），提交表单时直接将该值作为参数传递即可，后端对应字段用整型接收即可。
• 若后端需要接收枚举文本字符串（"Task"/"Bug"），只需把option的[value]绑定修改为option.label即可。

内容的提问来源于stack exchange，提问作者A D