Angular Select 默认值显示为空答案

【问题标题】：Angular Select default value shows emptyAngular Select 默认值显示为空
【发布时间】：2018-09-16 07:13:36
【问题描述】：

我正在开发 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>

我已经仔细检查了 json 数据，它看起来不错。这是截图

已经尝试过Angular 2 Dropdown Options Default Value，但没有任何效果。不知道是什么问题，一整天我都想不出原因。

下面是json数据：

过滤器。部门

{"DepartmentId":401,"Name":"Transport","IsActive":true}

fiterViewData。部门

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

【问题讨论】：

Angular Reactive Forms: Dynamic Select dropdown value not binding的可能重复
@Pengyy 它不是一种反应形式，也没有添加任何动态控件。所有静态的数据都填充在服务器上。我没有在 component.ts 中构建表单。我尝试了 compareWith 选项，这也不起作用
你能把fiterViewData. Departments 和filter. Department的当前数据贴出来吗？所以我们可以看到有什么区别。
@Pengyy 我更新了 JSON 数据

标签： angular select

【解决方案1】：

在将对象绑定到 select 的选项时，compareWith 将使ngModel 的值与选项的值匹配变得简单，即使它们保留不同的实例（您当前问题的原因）。

模板：

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

参考demo。

【讨论】：

你搞定了..这是一个错字我复制了compareFn的代码但我忽略了..谢谢