Блог

Как привязать Выбранное Выпадающее значение непосредственно к перечислению?

.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;
 

Вам нужны идентификатор и имя, чтобы перечислить выбранные параметры. и вы можете присвоить значение перечисления идентификатору, используя имя перечисления.

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

Решение Stackblits