Angular mat-autocomplete组件初始化输入框显示[object Object]问题求解

核心原因 #

你初始化FormControl时的传参错误，导致控件初始值为对象而非字符串，displayWith直接返回该对象时就会被转为[object Object]字符串显示在输入框中。筛选功能正常是因为用户输入触发valueChanges后，控件值会被替换为输入的字符串，不再使用错误的初始对象。

具体问题点和修复方案 #

• 问题1：FormControl初始值配置错误
  FormControl构造函数第一个参数如果传入对象，会被识别为包含value、disabled属性的配置项，你无需配置禁用状态的情况下不需要额外包一层对象。
  错误代码：

  country: new FormControl({ value: '' }, Validators.required)
  

  修复后代码：

  country: new FormControl('', Validators.required)
  

• 问题2：HTML模板存在语法错误
  两处属性未闭合引号，会导致模板解析异常：
  1. formControlName="country [matAutocomplete]="auto" 缺少country属性的闭合引号，修改为formControlName="country" [matAutocomplete]="auto"
  2. *ngFor="let country of filteredCountryAutoCompleteOptions | async [value]="country" 缺少ngFor指令的闭合引号，修改为*ngFor="let country of filteredCountryAutoCompleteOptions | async" [value]="country"
• 可选优化：完善displayWith逻辑
  可以明确参数类型避免隐式any问题，写法更严谨：

  countryDisplayWith(op: string | null): string {
    return op ?? '';
  }
  

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