如何在下拉列表中显示枚举文本值？

Posted 2023-02-22

【中文标题】如何在下拉列表中显示枚举文本值？

【英文标题】：How to show enum text values in Dropdown?

【发布时间】：2021-08-19 08:33:02

【问题描述】：

这是我的枚举值

export enum TaskCategory 
    Task = 0,
    Bug = 1,

html

                <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 state of states | keyvalue"  >state['value']</option>
                      

                    </select>
                    <div
                        *ngIf="addTaskForm.get('taskcategory').invalid && addTaskForm.get('taskcategory').touched">
                        <small
                            *ngIf="addTaskForm.get('taskcategory').invalid && addTaskForm.get('taskcategory').touched"
                            class="text-danger"> *Task Category is required</small>
                    </div>
                </div>

我只想显示枚举文本值？

以及如何在后端获取所选选项？

【参考方案1】：

要在模板中使用枚举，您可以这样做：

taskCategories: typeof TaskCategory = TaskCategory;

对于数字枚举，您需要过滤掉数值。

categoryKeys: string[] = Object.keys(this.taskCategories).filter(
  key => !isNaN(Number(this.taskCategories[key]))
);

更多详情请查看this answer

要将选定的选项发送到后端，您需要使用 HttpClient。通常的方法是将其导入服务并执行类似的操作：

sendData(payload) 
  return this.http.post(this.url, payload);

然后在你的组件中：

// Todo: bind to a button
sendData() 
  this.appService.sendData(this.selectedCategory).subscribe(res => 
    // handle response
  );

我建议阅读它here

Working example