Angular Material Autocomplete值为空且选择事件不触发问题排查

选择选项后值未保存、选择事件未执行 #

原因 #

Autocomplete组件HTML模板中，mat-autocomplete的optionSelected事件绑定方法名大小写不匹配：模板里写的是OnDropdownChange($event)（首字母大写），但TS组件中的方法是onDropdownChange（首字母小写），导致事件完全无法触发，父组件表单无法接收到选中值。

修复 #

修改HTML模板中的事件绑定：

<mat-autocomplete
  #auto="matAutocomplete"
  (optionSelected)="onDropdownChange($event)" <!-- 修正方法名大小写 -->
  [displayWith]="displayName"
>

点击输入框无选项显示，需输入空格删除才展示 #

原因 #

1. 组件内部control初始值为字符串''，但后续操作中传入的是OptGroupItem对象，类型不匹配；同时ngOnInit中valueChanges用startWith('')初始化，导致初始过滤逻辑处理字符串而非对象，无法生成全量选项列表。
2. createGroupOptions函数对初始过滤值的处理逻辑适配性差，无法正确识别空对象类型的过滤条件。

修复 #

1. 修正control的初始值和startWith的参数为emptyOption对象：

// 定义control时指定类型并初始化
control = new FormControl<OptGroupItem>(this.emptyOption);

ngOnInit(): void {
  this.options$ = this.control.valueChanges.pipe(
    startWith(this.emptyOption), // 替换原有的''
    map(value => this.createGroupOptions(value))
  );
}

2. 优化createGroupOptions的过滤逻辑，适配对象类型的输入：

private createGroupOptions(filter: OptGroupItem | string): GroupOption[] {
  let options = this.groupOptions;
  if (filter != null) {
    const searchValue = typeof filter === 'object' 
      ? filter.name.toLowerCase() 
      : filter.toString().toLowerCase();

    options = this.groupOptions.filter(option =>
      option.name.toLowerCase().includes(searchValue)
    );
  }
  return this.groupByGroup(options);
}

额外优化点 #

• 明确OptGroupItem接口类型，避免类型歧义：

interface OptGroupItem {
  group: string;
  name: string;
  id: string;
}

• 增强writeValue方法的空值处理：

writeValue(value: string | null) {
  if (!value) {
    this.control.setValue(this.emptyOption);
    return;
  }
  const currentValue = this.getOptionFromId(this.options, value) || this.emptyOption;
  this.control.setValue(currentValue);
}

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