Angular Mat Autocomplete下拉显示[object object]及TS2339错误求助

问题根因 #

你的代码核心问题是TypeScript类型声明和实际数据类型不匹配：

• 你给filteredOptions声明的类型是Observable<string[]>，但实际你返回的是包含用户信息的对象数组，TS校验时会认为每个option是字符串类型，所以使用option.name时抛出TS2339错误。
• 筛选方法_filter的返回值也错误声明为string[]，和实际返回的对象数组不匹配。
• 另外valueChanges回调的参数类型声明错误，选中选项后value会是用户对象，不是字符串。

修复步骤 #

1. （推荐）先定义用户数据类型 #

在组件类上方添加类型定义，方便后续类型校验：

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  // 其余需要的属性可按需补充
}

如果你不想单独定义类型，也可以临时用any替代，但不推荐长期使用。

2. 修改filteredOptions的类型声明 #

把原代码中的：

filteredOptions: Observable<string[]> | undefined

修改为：

filteredOptions: Observable<User[]> | undefined
// 不定义类型的话写：filteredOptions: Observable<any[]> | undefined

3. 修改_filter方法逻辑和类型 #

原方法没有兼容选中后value为对象的场景，同时返回值类型错误，修改为：

private _filter(value: string | User): User[] {
  // 判断value是字符串还是用户对象，取对应值做筛选
  const filterValue = typeof value === 'string' ? value.toLowerCase() : value.name.toLowerCase();
  return this.options.filter((option: User) =>
    option.name.toLowerCase().includes(filterValue)
  )
}

4. 修改valueChanges回调的参数类型 #

把ngOnInit中赋值filteredOptions的代码里的参数类型修改：

this.filteredOptions = this.myControl.valueChanges.pipe(
  startWith(''),
  map((value: string | User) => this._filter(value)) // 这里把value类型从string改成string | User
)

5. 模板改回name属性渲染 #

把模板里的{{option}}改回{{option.name}}即可正常展示用户名称，不会再报错。

修改完成后所有功能就可以正常运行，下拉选项会正常展示用户名称，输入框选中后也会通过你已经写好的displayFn正常展示名称。

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