Angular mat-autocomplete无法识别option属性问题求助

我尝试用Angular自动完成组件实现功能时遇到两个问题：

• 下拉选项显示为[object object]
• 想指定option.name来显示文本时，TypeScript提示“属性不存在”的错误

我已做的操作：

1. 编写了过滤方法_filter并打印options排查问题
2. 通过异步请求获取员工数据，将其映射为包含id/clock/payroll/name字段的options数组

具体解决步骤 #

1. 给options定义明确的类型

TypeScript报错的核心原因是未给options指定类型，编译器无法识别对象属性。先定义接口约束：

// 定义选项的类型接口
interface EmployeeOption {
  id: number;
  clock: number;
  payroll: string;
  name: string;
}

// 在组件类中声明options数组
options: EmployeeOption[] = [];

2. 修复异步数据的顺序问题

retrieveAbsence是异步请求，直接在外部执行map逻辑时，employee还未被异步请求赋值，导致options为空。需将映射逻辑放到请求回调内部：

retrieveAbsence(): void {
  this.employeeService.getAll()
    .subscribe(
      data => {
        this.employee = data;
        // 确保拿到数据后再生成options
        this.options = this.employee.map(i => ({
          id: i.id,
          clock: i.clock,
          payroll: i.payroll,
          name: `${i.firstName} ${i.surName}`
        }));
      },
      error => {
        console.log(error);
      });
}

3. 设置displayWith解决[object object]显示问题

Angular自动完成组件无法直接渲染对象，需通过displayWith指定显示字段：
模板代码：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayOption">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{ option.name }}
  </mat-option>
</mat-autocomplete>

组件类方法：

displayOption(option: EmployeeOption): string {
  // 处理空值情况，避免报错
  return option ? option.name : '';
}

4. 修正过滤方法的类型匹配

现在options是对象数组，需调整_filter的返回类型：

private _filter(value: string): EmployeeOption[] {
  if (!value) return [];
  const filterValue = value.toLowerCase();
  return this.options.filter(option => 
    option.name.toLowerCase().includes(filterValue) ||
    option.clock.toString().startsWith(filterValue)
  );
}

同时要确保filteredOptions的类型对应：

filteredOptions: Observable<EmployeeOption[]>;

ngOnInit() {
  this.retrieveAbsence();
  this.filteredOptions = this.myControl.valueChanges.pipe(
    startWith(''),
    map(value => this._filter(value))
  );
}

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