Angular ng-select绑定对象预选值不显示，需点击聚焦才生效

问题根源 #

ng-select默认通过对象引用相等来匹配表单值与选项列表中的项。即便两个对象的属性完全一致，只要不是内存中的同一个引用，组件就无法自动识别为选中状态，只有当用户点击触发组件重新校验时，才会显示正确的值。另外，如果表单初始值的设置时机早于选项列表的初始化完成时间，也会导致这个问题。

推荐解决方法 #

1. 绑定对象的唯一标识（最稳妥）

放弃直接绑定整个对象，改为绑定对象的唯一属性（如id），同时通过bindLabel指定显示的文本：

模板代码：

<ng-select 
  formControlName="selectedItem"
  [items]="options"
  bindValue="id"
  bindLabel="name"
>
</ng-select>

组件类中初始化表单时，直接设置对应标识值：

this.form = this.fb.group({
  selectedItem: [this.options[0].id, Validators.required]
});

这种方式彻底避免了引用匹配的问题，同时提升组件性能。

2. 自定义比较器（必须绑定整个对象时使用）

如果业务需求必须绑定整个对象，通过[compareWith]输入属性自定义匹配逻辑，让组件通过对象的属性值而非引用来判断是否选中：

组件类中定义比较函数：

compareObjects(obj1: any, obj2: any): boolean {
  // 根据实际业务场景调整判断逻辑，比如用id、code等唯一标识
  return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}

模板中添加compareWith配置：

<ng-select 
  formControlName="selectedItem"
  [items]="options"
  bindValue="." <!-- 绑定整个对象 -->
  bindLabel="name"
  [compareWith]="compareObjects"
>
</ng-select>

这样即使对象引用不同，只要指定的属性匹配，组件就能正确识别初始选中项并显示。

3. 确保初始值设置时机晚于选项加载

如果选项是异步获取的（比如从API请求），要在数据返回后再设置表单初始值，避免组件初始化时选项列表为空导致的匹配失败。

为什么focus/blur能临时解决 #

手动触发focus再blur时，ng-select会重新执行选中项的匹配逻辑，此时组件已完成初始化，能正确识别表单值对应的选项，但这只是临时的 workaround，并非根本解决方案。

内容的提问来源于stack exchange，提问作者Dima Savenkov