如何在Angular 9中填充空选择的内容

Question

我试图用.net web api的数据填充我的dropdownlist.I don't have any eror and its appear that some data is her but I can't bind it.any idea?

我的代码

employee.component.html

<div class="form-group">  
      <label>Select your Department</label>
    <select class="custom-select" [(ngModel)]="employeeService.formData.Departments" 
[ngModelOptions]="{standalone: true}" >
      <option value="" disabled>
        Choose your department
      </option>
      <option *ngFor="let dept of departments" [ngValue]="dept.DepartmentId">
        {{ dept.dname }}
      </option>
    </select> 
  </div>    

雇员.组件.ts

public departments: Array<Department>; 

this.loadDepartments();

    loadDepartments() {        
        return this.departmentService.getDepartments().subscribe(departments => this.departments = departments);    
      }

部门.服务.ts

getDepartments(): Observable<Department[]> {
    return this.http.get<Department[]>(this.url + '/alldepartmentdetails');
  }

下拉列表 emty

Answer 1

现在工作了

    div class="form-group" style="padding-left: 20px;">  
    <label>Select your Department </label>
    <select [ngModelOptions]="{standalone: true}" [(ngModel)]="employeeService.formData.DepartmentId" (change)="selectChangeHandler($event)" class="form-control" required>
      <option value="Choose your department" disabled>
        Choose your department
      </option>
      <option *ngFor="let dept of departments" value= "{{dept.DepartmentId}}" >
        {{ dept.DName }}
    </select> 
  </div>



enter code here