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

Question

这是我的枚举值

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>

我只想显示枚举文本值？

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

Answer 1

要在模板中使用枚举，您可以执行以下操作：

taskCategories: typeof TaskCategory = TaskCategory;

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

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

有关详细信息，请查看

要将所选选项发送到后端，您需要使用 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

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

How to show enum text values in Dropdown?

angular

angular10

angular11