Angular中mat-autocomplete默认值设置：ngModel绑定显示undefined

1. 确保userselect是完整匹配的对象 #

mat-autocomplete的选项值是完整对象，因此userselect不能仅传入ID，必须是filteredObject数组中存在的完整对象实例。如果后端仅返回默认ID，需先从filteredObject中找到对应ID的对象赋值给userselect。

组件TS文件示例代码：

// 假设后端返回的默认用户ID是153
const defaultUserId = 153;
// 从过滤数组中匹配对应对象
this.userselect = this.filteredObject.find(item => item.ID === defaultUserId);

2. 修正模板绑定与拼写错误 #

mat-autocomplete需和输入框正确关联，且ngModel应绑定在输入框上，而非直接绑定在autocomplete组件上。同时注意你原代码中autocomplete的拼写错误（写成了autocopmlete），这会导致绑定失效。

完整模板结构示例：

<input type="text" 
       [(ngModel)]="userselect" 
       [matAutocomplete]="autocomplete">

<mat-autocomplete #autocomplete="matAutocomplete">
  <mat-option title="{{item.UserName}}" 
              *ngFor="let item of filteredObject" 
              [value]="item"
              (onSelectionChange)="selectUser($event,item)">
    {{ item.FirstName }} {{item.LastName}} ({{item.UserName}})
  </mat-option>
</mat-autocomplete>

3. 自定义显示逻辑处理对象引用差异 #

如果因对象引用不同（比如后端返回对象和前端数组对象不是同一引用）导致匹配失败，可通过displayWith函数自定义显示逻辑，基于ID而非引用匹配。

• 组件TS中定义显示函数：

displayUser(user: any): string {
  return user ? `${user.FirstName} ${user.LastName} (${user.UserName})` : '';
}

• 模板中给mat-autocomplete绑定displayWith：

<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayUser">
  <!-- 原有选项内容保持不变 -->
</mat-autocomplete>

此时只要userselect的ID与数组中对象的ID一致，即使引用不同，也能正确显示用户名称。

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