Angular 8 mat-autocomplete显示[Object Object]，displayWith失效求助

看起来你遇到的问题是mat-autocomplete的displayWith在一个页面正常，另一个页面却直接显示[Object Object]，结合你的代码和日志，我来帮你梳理下可能的原因和解决步骤：

1. 先搞定displayWith方法的上下文绑定 #

Angular模板里绑定组件方法时，普通函数很容易丢失组件的this上下文，导致方法执行异常——哪怕日志显示方法被调用了，也可能因为this指向不对，返回值没按预期生效。

你可以用两种方式修复：

方式一：改用箭头函数定义方法 #

箭头函数会自动绑定组件的this，避免上下文丢失：

getDropdownView = (option) => { 
  console.log("getDropdownView(): option:", option); 
  return option ? option.value : ''; // 加个空值检查，防止option为null时出错
}

方式二：在构造函数里手动绑定this #

如果不想改函数写法，就在组件构造函数里把方法绑定到组件实例：

constructor() {
  this.getDropdownView = this.getDropdownView.bind(this);
}

getDropdownView(option) { 
  console.log("getDropdownView(): option:", option); 
  return option ? option.value : '';
}

2. 优化输入框的value绑定逻辑 #

你的getDropdownValue方法有几个潜在坑，可能导致显示异常：

• 用for...in遍历数组，这会遍历数组的原型链属性，容易出现错误匹配
• 没有做空值检查，当dropdownData[field_name]还没加载完成时，会返回undefined甚至报错

优化后的版本更简洁可靠：

getDropdownValue(field_name: string) { 
  const id = this.model.data[field_name]; 
  // 先做空值检查：id不存在或下拉数据未加载时，返回空字符串
  if (!id || !this.dropdownData[field_name]) return '';
  
  // 用Array.find精准查找匹配的选项
  const matchedOption = this.dropdownData[field_name].find(option => option.id === id);
  // 返回匹配项或空字符串
  return matchedOption || '';
}

3. 确保数据更新后触发变更检测 #

如果你的组件用了ChangeDetectionStrategy.OnPush，当下拉数据dropdownData更新时，Angular可能不会自动触发变更检测，导致displayWith没有重新执行。这时候需要手动触发：

首先注入ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef) {
  // 其他初始化代码
}

然后在loadDropdownData加载完数据后，调用detectChanges()：

loadDropdownData(value: string, fieldName: string) {
  // 你的数据加载逻辑，比如从接口获取数据
  this.dropdownData[fieldName] = fetchedData;
  // 手动触发变更检测，让Angular更新视图
  this.cdr.detectChanges();
}

4. 检查输入框与autocomplete的关联是否正确 #

确认输入框的[matAutocomplete]正确绑定到了mat-autocomplete的模板引用变量（你的代码里是#auto="matAutocomplete"，这部分看起来没问题）。另外，别在输入框上同时用[(ngModel)]和[value]，这会导致绑定冲突。

最后验证一下：确保getDropdownView在任何情况下都返回字符串（比如空值时返回空字符串），再看看控制台有没有报错，比如option为undefined的情况。

按这些步骤调整后，应该就能解决displayWith不生效、显示[Object Object]的问题了。

内容的提问来源于stack exchange，提问作者Evgeny Nozdrev