如何使通过代码设置的mat-option高亮显示并带有勾选标记？

当你通过setValue()给表单控件赋值时，只是更新了表单的值，但MatAutocomplete组件本身并不会自动把对应的下拉选项标记为选中状态——这就是手动选择和编程赋值的核心区别。

下面是两种可行的解决思路：

方案一：定位目标选项并设置activeOption #

通过MatAutocomplete的options集合找到目标选项，手动设置为activeOption，同时触发选中样式：

import { MatAutocomplete } from '@angular/material/autocomplete';
import { ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';

@ViewChild('auto') autocomplete!: MatAutocomplete;
myControl = new FormControl('');
options: string[] = ['Option 1', 'Option 2', 'Option 3'];

setProgrammaticValue(value: string) {
  // 先同步表单控件值
  this.myControl.setValue(value);
  // 从autocomplete的选项中匹配目标值
  const targetOption = this.autocomplete.options.find(opt => opt.value === value);
  if (targetOption) {
    // 设置为当前激活选项
    this.autocomplete.activeOption = targetOption;
    // 手动触发选中状态的样式渲染
    targetOption._setSelected(true);
  }
}

注意：_setSelected是组件私有方法，版本更新可能存在兼容性风险，优先考虑方案二。

方案二：手动触发optionSelected事件 #

模拟用户手动选择的逻辑，触发组件原生的选中事件，让Autocomplete自己处理高亮状态：

import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';

@ViewChild('auto') autocomplete!: MatAutocomplete;
myControl = new FormControl('');
options: string[] = ['Option 1', 'Option 2', 'Option 3'];

setProgrammaticValue(value: string) {
  const targetOption = this.autocomplete.options.find(opt => opt.value === value);
  if (targetOption) {
    // 创建并触发选中事件
    const selectEvent = new MatAutocompleteSelectedEvent(this.autocomplete, targetOption);
    this.autocomplete.optionSelected.emit(selectEvent);
    // 同步表单控件值
    this.myControl.setValue(value);
  }
}

额外提示 #

• 如果你的选项是对象类型，要调整匹配逻辑（比如对比opt.value.id === targetId而非直接对比值）
• 确保要设置的value确实存在于选项数组中，否则无法匹配到目标选项

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