Material Autocomplete代码设置值后显示[Object object]求助

我之前也碰到过一模一样的坑！手动选选项时显示正常，可一用代码给formControl赋值就直接蹦出[Object object]，其实核心问题大多出在displayWith函数的执行逻辑或者变更检测没触发上，下面给你几个亲测有效的解决办法：

1. 先确认赋值对象的结构完全匹配 #

首先检查你设置的exampleObject是不是真的符合Usuario类型的结构——必须包含nombre和apellido字段，不能是缺字段的对象或者只是个ID字符串。比如正确的赋值姿势应该是这样：

// 示例：构造符合要求的Usuario对象
const targetUser: Usuario = {
  id: 123,
  nombre: 'Maria',
  apellido: 'Gomez',
  // 其他必填字段...
};
this.padre.setValue(targetUser);

如果是从API获取的对象，一定要确认字段名和你组件里的Usuario类完全一致（比如别把nombre写成name这种低级错误）。

2. 优化displayWith函数的容错性 #

你的displayWith函数返回undefined可能会触发一些边缘情况的问题，改成返回空字符串会更稳妥，同时明确标注参数可能为null：

displayPadre(padre: Usuario | null): string {
  // 先判断对象是否存在，再拼接姓名
  return padre ? `${padre.nombre} ${padre.apellido}` : '';
}

这样即使赋值时对象暂时为null，输入框也只会显示空内容，而不是奇怪的[Object object]。

3. 手动触发变更检测（如果用了OnPush策略） #

如果你的组件设置了ChangeDetectionStrategy.OnPush，直接设置formControl值后，Angular可能不会自动更新视图。这时候需要注入ChangeDetectorRef并手动触发检测：

import { ChangeDetectorRef } from '@angular/core';

// 在组件构造函数中注入
constructor(private cdr: ChangeDetectorRef) {}

// 赋值后调用检测
this.padre.setValue(exampleObject);
this.cdr.detectChanges(); // 强制更新视图

4. 排查displayWith的绑定是否正常 #

确保displayPadre是组件类的公共成员函数，模板里能正确访问到。别把它写成私有函数，也别在模板里写错函数名（比如写成displayParent而不是displayPadre）。

最后给个排查小技巧 #

可以在displayPadre函数里加个console.log，看看代码赋值时这个函数有没有被调用：

displayPadre(padre: Usuario | null): string {
  console.log('displayWith被调用，传入的对象：', padre);
  return padre ? `${padre.nombre} ${padre.apellido}` : '';
}

如果控制台没打印，说明formControl的值可能不是对象（比如是字符串或者null），得检查赋值代码；如果打印了但nombre/apellido是undefined，那就是对象结构的问题。

内容的提问来源于stack exchange，提问作者José Medrano