Angular 角度选择默认值显示为空

我正在开发Angular 4应用程序，它有一个填充了默认值的下拉列表。但是我下面的代码不适用于

default

选择。无论我通过

ngModel

设置了什么，它都显示为空

<div class="form-group form-ctrl-display header-button-align">
  <select name="selectDepartment" class="form-control form-control-sm"
    [class.faded]="format.isEmpty(filter.Department)"
    style="max-width: 94px"
    [(ngModel)]="filter.Department"
    placeholder="Department">

    <option *ngFor="let department of filterViewData.Departments"
      [ngValue]="department">
      {{department.Name}}
    </option>
  </select>
  {{filter.Department| json}}
</div> 

fiterViewData。部门

[{"DepartmentId":400,"Name":"IT","IsActive":true},   
{"DepartmentId":401,"Name":"Transport","IsActive":true},
{"DepartmentId":402,"Name":"Admin","IsActive":true}]

---

将对象绑定到select的选项时，

compareWith

将简化

ngModel

值与选项值的匹配，即使它们保留不同的实例（当前问题的原因）

模板：

<select [(ngModel)]="filter.Department" [compareWith]="compareFun">
  <option *ngFor="let department of filterViewData.Departments"
    [ngValue]="department">
    {{department.Name}}
  </option>
</select>

---

请参阅@Pengyy的可能副本@Pengyy不是被动形式，也不添加任何动态控件。服务器上填充了所有静态数据。我不是在component.ts中构造表单。我尝试了使用compareWith选项，但这也不起作用。您可以发布

fiterViewData的当前数据。部门

和

过滤器。部门

？所以我们可以看看有什么不同。@Pengyy我已经更新了JSON数据，你搞定了。。这是一个打字错误，我复制的代码有

compareFn

，但我忽略了看。。谢谢

<select [(ngModel)]="filter.Department" [compareWith]="compareFun">
  <option *ngFor="let department of filterViewData.Departments"
    [ngValue]="department">
    {{department.Name}}
  </option>
</select>

compareFun(item1, item2) {
  // you can determine the rule of matching different objects(for example: DepartmentId)
  return item1 && item2 ? item1.DepartmentId === item2.DepartmentId : item1 === item2;
}