如何解决如何将选定的下拉值直接绑定为枚举?
如何将选中的下拉值直接绑定为枚举?
.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' }
];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。