Angular Material中mat-autocomplete选中值传递问题求助

我来帮你搞定这个问题！你遇到的控制台输出undefined的情况，主要是因为事件绑定和参数类型不匹配，还有对mat-autocomplete的事件机制理解有点偏差，下面给你两种可行的解决方案：

方案一：修正onSelectionChange的使用方式 #

你当前给<mat-option>绑定的onSelectionChange事件，它的参数类型是MatOptionSelectionChange（不是你TS里写的MatAutocompleteSelectedEvent），而且这个事件会在选中和取消选中时都触发，所以需要做一些调整：

1. 先在TS里导入正确的事件类型：

import { MatOptionSelectionChange } from '@angular/material/core';

2. 修改你的selected函数：

selected(event: MatOptionSelectionChange) {
  // 只处理用户手动选择的情况，避免自动触发的无效事件
  if (event.isUserInput) {
    // 获取选中的选项值
    console.log(event.source.value);
  }
}

3. HTML代码不需要修改，保持你原来的绑定即可。

方案二：使用mat-autocomplete专属的optionSelected事件（更推荐） #

这个事件是Angular Material专门为选中自动完成项设计的，逻辑更清晰，只会在用户选中选项时触发，参数类型就是你原本想用的MatAutocompleteSelectedEvent：

1. 修改HTML，把事件绑定移到<mat-autocomplete>上：

<mat-form-field style="text-align: right">
  <input type="text" placeholder="type..." matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.companyName">
      {{option.companyName}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

2. TS代码保持你原来的类型，调整取值方式：

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

selected(event: MatAutocompleteSelectedEvent) {
  // 通过event.option.value获取选中的值
  console.log(event.option.value);
}

为什么你之前会输出undefined？ #

你之前的问题核心是：

• 错误地给mat-option的onSelectionChange事件传入了MatAutocompleteSelectedEvent类型的参数，类型不匹配导致无法正确读取值
• 即使类型正确，onSelectionChange会在取消选中时也触发，这时候可能拿到的就是无效值，加上没有过滤非用户操作的事件，就出现了undefined的情况

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