Bootstrap 3.3.7下拉菜单不显示所选值

Question

我是Bootstrap的新手，并且正在使用最新的 Bootstrap 3.3.7 。 当用户选择其中一个选项时，我试图显示选定的值。但是使用我下面的代码，它不会显示选定的值，可以帮助我

html：

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

.ts：

departments: Department[] = [
    { id: 1, name: 'HR' },
    { id: 2, name: 'IT' },
    { id: 3, name: 'DEV'},
    { id: 4, name: 'MG' }
]

Answer 1

将此'[value] =“ dept”'替换为 [value] =“ dept.id” 。

Answer 2

更改   [值] 至值  “ dept.id” 到 {{dept.id}}

<div class="form-group">
    <label for="department">DepartMent</label>
    <select id="department" name="department" [(ngModel)]="department" class="form-control">
      <option selected disabled>Select a Department</option>
      <option  value={{dept.id}} *ngFor="let dept of departments">
       {{dept.name}}
      </option>
    </select>
  </div>