Angular Material Autocomplete重复选中选项显示值异常问题

问题原因 #

你的mat-option将[value]绑定到了option.id，输入框的[(ngModel)]却绑定到name字段。首次选中时，selectionChange事件会手动把name设为选项的名称；但重复选中同一选项时，Angular Material会直接将选项的value（也就是ID）赋值给ngModel绑定的name，导致显示内容变成ID。

修复方案（最小改动） #

添加displayWith函数，明确告诉Autocomplete如何渲染选中选项的显示文本，替代默认的直接显示value的行为。

修改后的TS代码

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatAutocompleteModule,
  MatAutocompleteSelectedEvent,
} from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

interface Item {
  id: string;
  name: string;
}

@Component({
  selector: 'app-autocomplete',
  standalone: true,
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FormsModule, MatAutocompleteModule, MatInputModule],
})
export class AutocompleteComponent {
  options: Item[] = [
    { id: '1', name: 'Item One' },
    { id: '2', name: 'Item Two' },
    { id: '3', name: 'Item Three' },
  ];
  name: string = '';
  id: string = '';
  placeholder: string = 'Select an option';

  resetField() {
    this.name = '';
  }

  selectionChange(e: MatAutocompleteSelectedEvent) {
    this.name = e.option.viewValue;
    this.id = e.option.value; // 保留ID赋值用于业务逻辑
  }

  // 新增：根据ID匹配对应的名称作为显示文本
  displayOption(id: string): string {
    const matchedItem = this.options.find(item => item.id === id);
    return matchedItem ? matchedItem.name : '';
  }
}

修改后的HTML代码

<mat-form-field>
  <mat-label>{{ placeholder }}</mat-label>
  <input
    #assetInput
    type="text"
    [placeholder]="placeholder"
    matInput
    [(ngModel)]="name"
    [matAutocomplete]="auto"
  />
  <mat-autocomplete
    #auto="matAutocomplete"
    (optionSelected)="selectionChange($event)"
    [displayWith]="displayOption" <!-- 添加displayWith绑定 -->
  >
    <mat-option *ngFor="let option of options" [value]="option.id">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

可选优化方案（绑定整个对象） #

如果业务中需要同时处理ID和名称，可以将mat-option的[value]绑定到整个option对象，避免ID与名称分离绑定的混乱：

TS代码调整

// 替换原有的name和id字段
selectedItem: Item | null = null;

selectionChange(e: MatAutocompleteSelectedEvent) {
  this.selectedItem = e.option.value;
}

// 简化displayWith函数
displayOption(item: Item): string {
  return item ? item.name : '';
}

HTML代码调整

<input
  #assetInput
  type="text"
  [placeholder]="placeholder"
  matInput
  [(ngModel)]="selectedItem"
  [matAutocomplete]="auto"
/>
<mat-autocomplete
  #auto="matAutocomplete"
  (optionSelected)="selectionChange($event)"
  [displayWith]="displayOption"
>
  <mat-option *ngFor="let option of options" [value]="option">
    {{ option.name }}
  </mat-option>
</mat-autocomplete>

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