Angular Material中mat-autocomplete关闭事件捕获问题求助

问题原因 #

Angular Material的mat-autocomplete组件的closed事件本身没有事件参数，所以绑定(closed)="onClosedEvent($event)"时，$event必然是undefined，这是组件的设计规则，不属于代码错误。

解决方案 #

根据需求不同，有两种常用处理方式：

1. 直接执行关闭逻辑（无需参数） #

如果只是需要在下拉面板关闭时执行操作，去掉事件参数即可：

• 模板代码：

<mat-autocomplete #auto="matAutocomplete" (closed)="onClosedEvent()">
  <mat-option *ngFor="let animal of animals" [value]="animal.name">
    {{animal.name}}
  </mat-option>
</mat-autocomplete>

• 组件代码：

onClosedEvent() {
  console.log('下拉面板已关闭');
  // 此处添加你的关闭逻辑
}

2. 获取关闭时的选中项（若有需求） #

如果需要获取用户选中的内容，可通过绑定的表单控件或mat-autocomplete实例获取：

• 模板代码（绑定表单控件）：

<input type="text" [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (closed)="onClosedEvent()">
  <mat-option *ngFor="let animal of animals" [value]="animal.name">
    {{animal.name}}
  </mat-option>
</mat-autocomplete>

• 组件代码：

import { FormControl } from '@angular/forms';

// 定义表单控件
myControl = new FormControl();

onClosedEvent() {
  const selectedValue = this.myControl.value;
  console.log('选中的值：', selectedValue);
}

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