ng-autocomplete显示'[object Object]'且[initialValue]属性不生效问题

问题1：组件展示内容为[object Object] #

原因 #

ng-autocomplete默认会将绑定的ngModel值直接转为字符串展示，你当前绑定的TitleSelected是BaseEntity对象类型，直接转字符串就会输出[object Object]。

解决方法 #

新增displayWith属性指定对象转展示文本的规则：

1. TS文件中新增展示规则函数

public displayTitle(item: BaseEntity): string {
  return item?.title ?? '';
}

2. HTML的ng-autocomplete标签新增属性绑定

[displayWith]="displayTitle"

问题2：[initialValue]属性设置后不生效 #

排查&解决步骤 #

• 你当前的代码中并未添加[initialValue]属性绑定，首先确认是否漏写该属性。
• 如果你同时使用了[(ngModel)]双向绑定，initialValue的优先级低于ngModel，初始值会以TitleSelected的赋值为准，不需要额外设置initialValue。
• 确认赋值时机：必须等待[data]绑定的titles数组加载完成后，再给TitleSelected赋值。如果titles是异步接口返回的数据，要在接口回调完成后再执行初始值赋值，避免组件找不到匹配项导致初始值不生效。
• 优先使用titles数组内的对象实例赋值，不要手动构造新对象，避免组件按引用匹配时识别失败：

// 替换原有的手动赋值逻辑
this.TitleSelected = this.titles.find(t => t.id === this.model.titleId);

• 检查itemTemplate自定义模板的字段是否正确，避免模板内字段写错导致初始值展示异常。

内容的提问来源于stack exchange，提问作者Jesus Naderi