Material Angular mat-autocomplete [displayWith]函数作用域变量更新问题

我之前也碰到过类似的坑，其实核心是要把显示文本和实际绑定的模型值分开处理，mat-autocomplete专门提供了displayWith函数来干这个事儿，不用费劲去手动更新控制器变量。咱们一步步来解决：

1. 核心方案：用displayWith分离显示与模型值 #

这是实现“显示拼接文本+绑定原始模型变量”最简洁的方式，Angular会帮你处理显示逻辑，不用手动折腾控制器变量。

组件类代码示例 #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

// 定义选项结构：区分绑定的模型值和显示文本
interface Option {
  value: string; // 绑定到输入模型的变量（比如ID、编码）
  label: string; // 用户看到的主文本
  helperText: string; // 要拼接的辅助文本
}

@Component({
  selector: 'app-autocomplete-example',
  templateUrl: './autocomplete-example.component.html',
})
export class AutocompleteExampleComponent {
  myControl = new FormControl();
  options: Option[] = [
    { value: 'opt1', label: '选项1', helperText: '（辅助说明A）' },
    { value: 'opt2', label: '选项2', helperText: '（辅助说明B）' },
    { value: 'opt3', label: '选项3', helperText: '（辅助说明C）' },
  ];
  filteredOptions!: Observable<Option[]>;

  ngOnInit() {
    // 初始化选项过滤逻辑
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  // 自定义选项过滤规则
  private _filter(value: string): Option[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => 
      option.label.toLowerCase().includes(filterValue) || 
      option.value.toLowerCase().includes(filterValue)
    );
  }

  // 关键：控制输入框显示的文本（拼接主文本+辅助文本）
  displayFn(option: Option): string {
    if (!option) return '';
    return `${option.label} ${option.helperText}`;
  }
}

模板代码示例 #

<mat-form-field appearance="fill">
  <mat-label>带辅助文本的自动完成</mat-label>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      <!-- 下拉选项里也显示拼接后的文本 -->
      {{ option.label }} {{ option.helperText }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

2. 如果确实需要更新控制器变量（比如选择后同步其他数据） #

如果你需要在用户选择选项后更新控制器里的其他局部变量，别在模板里直接修改，而是通过事件监听来处理：

方式一：监听optionSelected事件 #

在模板里添加事件绑定：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onOptionSelected($event)">
  <!-- 选项内容不变 -->
</mat-autocomplete>

组件类里添加处理函数：

selectedOption?: Option;

onOptionSelected(event: any) {
  this.selectedOption = event.option.value;
  // 这里可以自由更新任何控制器变量
  console.log('选中的完整选项：', this.selectedOption);
}

方式二：监听FormControl的valueChanges #

在ngOnInit里添加订阅逻辑：

this.myControl.valueChanges.subscribe(value => {
  if (typeof value === 'object' && value) {
    // 选中选项时，value是完整的Option对象，直接更新变量
    this.selectedOption = value;
  }
});

为什么你之前更新不了变量？ #

大概率是这两个原因：

• 混淆了显示值和模型值：直接去修改输入框绑定的变量，但mat-autocomplete会自动同步模型值，手动修改容易产生冲突
• 没触发Angular变更检测：如果是在异步操作里修改变量，可能需要手动触发变更检测，但用上面的方法基本不需要额外处理

这样设置后，输入框绑定的myControl值是完整的Option对象（也可以改成只绑定option.value，只要对应调整displayFn和过滤逻辑），显示给用户的是拼接后的文本，同时还能正常更新控制器里的变量~

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