如何将选定的下拉值直接绑定为枚举？

问题描述

如何将选中的下拉值直接绑定为枚举？

.html 文件

<div class="form-group">
    <label for="department">Department</label>
    <select name="department" [(ngModel)]="selectedValue" 
            #selDept 
            (change) = "onDepartmentChange(selDept.value)"
            class="form-control">
      <option *ngFor="let dept of departments" [value]="dept.id">
        {{dept.name}}
      </option>
          </select>
  </div>

.ts 文件

import { Component,OnInit } from '@angular/core';
import { Department,DepartmentEnum } from './models/department.model';

@Component({
  selector: 'app-ddl',templateUrl: './ddl.component.html',styleUrls: ['./ddl.component.css']
})
export class DdlComponent implements OnInit {

  constructor() { 
    this.selectedValue = 1;
  }

  ngOnInit(): void {
  }

  selectedValue: DepartmentEnum; //Can NgModel be directly typecasted into Enum


  departments: Department[] = [
    { id: 1,name: 'One' },{ id: 2,name: 'Two' },{ id: 3,name: 'Three' }
  ];

  onDepartmentChange(changedValue: any){
    debugger;
    console.log(`hi,you changed me,to ${changedValue}`);
  }
}

枚举文件

export enum DepartmentEnum{
    NA = 0,A = 1,B = 2
}

解决方法

selectedValue 保存单个值。您可以为其分配枚举值之一。

this.selectedValue = DepartmentEnum.B;

您需要 id 和 name 才能列出选择的选项。您可以使用枚举名称将枚举值分配给 id。

departments: Department[] = [
 { id: DepartmentEnum.A,name: 'One' },{ id: DepartmentEnum.B,name: 'Two' },{ id: DepartmentEnum.NA,name: 'Three' }
];

Stackblits solution