Angular Material mat-select组件change事件未触发该如何解决？

核心问题原因 #

你的代码存在两处错误导致回调无法触发、参数无法正确传递：

1. 错误使用了原生change事件，Angular Material mat-select 组件的选择变化事件为selectionChange
2. 模板中直接写value无法识别，需要通过事件对象$event传递选中值

修复步骤 #

1. 修改模板绑定代码 #

替换mat-select的事件绑定和参数传递，修正后代码如下：

<mat-form-field>
  <mat-label>Select country</mat-label>
  <mat-select (selectionChange)="countrySelected($event.value)">
    <mat-option>None</mat-option>
    <mat-option value="option1">France</mat-option>
    <mat-option value="option2">Germany</mat-option>
    <mat-option value="option3">America</mat-option>
  </mat-select>
</mat-form-field>

2. 可选排查项 #

如果修改后仍无法触发回调，检查以下配置：

• 确认当前组件所属的NgModule已经正确导入MatSelectModule、MatFormFieldModule
• 打开浏览器控制台，排查是否存在其他运行时错误阻塞了事件执行
• 如果你已经为mat-select绑定了[(ngModel)]或响应式表单的formControlName，也可以直接监听对应变量的变化实现逻辑，无需额外绑定selectionChange事件

你的countrySelected回调方法本身无需修改，修正模板后即可正常打印选中的value值。

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