Angular mat-autocomplete点击选中选项后输入框为空问题求助

嘿，我瞅了下你的代码，这个问题我之前也踩过类似的坑！核心问题出在mat-option的[value]绑定和输入框的表单控件不匹配上，给你两种针对性解决方案：

原因分析 #

你的输入框绑定的是formControlName="userName"，这个控件应该是用来存储字符串类型的用户名，但你给mat-option的[value]绑定的是整个username对象。当你选中选项时，输入框试图渲染这个对象，自然没办法转换成可读的文本，就变成空的了。

方案一：直接绑定用户名字符串 #

如果你的表单只需要存储用户名文本，直接把[value]改成username.userName就行，这样选中后输入框会直接显示用户名：

<mat-form-field class="form-group">
  <input 
    id="userNameInput" 
    matInput 
    placeholder="Search user name" 
    formControlName="userName" 
    #searchBox 
    (input)="search(searchBox.value)" 
    [matAutocomplete]="auto">
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    <mat-option *ngFor="let username of mockLdap | async" [value]="username.userName">
      {{username.userName}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

方案二：用displayWith保留用户对象（推荐需要完整用户信息时用） #

如果你后续需要用到用户的其他信息（比如ID、邮箱等），不想只存用户名，那就用displayWith来定义输入框的显示内容：

1. 先在你的组件TS文件里添加一个显示方法：

// 假设你的用户对象结构是{userName: string, ...}
displayUser(user: any): string {
  // 当用户对象存在时显示用户名，否则显示空字符串
  return user ? user.userName : '';
}

2. 然后在HTML里给mat-autocomplete加上[displayWith]属性：

<mat-form-field class="form-group">
  <input 
    id="userNameInput" 
    matInput 
    placeholder="Search user name" 
    formControlName="userName" 
    #searchBox 
    (input)="search(searchBox.value)" 
    [matAutocomplete]="auto">
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayUser">
    <mat-option *ngFor="let username of mockLdap | async" [value]="username">
      {{username.userName}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

另外还要注意：确保你的userName表单控件初始值类型和绑定的value匹配——方案一初始值设为空字符串''，方案二初始值设为null或undefined就好。

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