Angular 6 Material mat-select的(change)方法已移除，如何替换实现选择变更逻辑？

嘿，这个问题我太熟悉了！在Angular Material 6及后续版本中，mat-select确实移除了旧的(change)事件，官方推荐使用**(selectionChange)事件**来替代，它的用法和原来的(change)非常相似，但能提供更贴合组件的事件信息。

下面给你两种常见场景的实现方式：

1. 模板驱动表单（搭配ngModel） #

在模板中直接绑定(selectionChange)事件，然后在组件类中处理逻辑：

模板代码 #

<mat-select [(ngModel)]="selectedValue" (selectionChange)="handleSelectionChange($event)">
  <mat-option value="apple">苹果</mat-option>
  <mat-option value="banana">香蕉</mat-option>
  <mat-option value="orange">橙子</mat-option>
</mat-select>

组件类代码 #

import { MatSelectChange } from '@angular/material/select';

selectedValue: string = 'apple';

handleSelectionChange(event: MatSelectChange) {
  // 事件对象里包含选中的值和触发事件的mat-select实例
  console.log('当前选中的值:', event.value);
  console.log('触发事件的组件:', event.source);
  
  // 也可以直接使用双向绑定更新后的selectedValue
  console.log('双向绑定的选中值:', this.selectedValue);
  
  // 在这里添加你的业务逻辑，比如发起请求、更新其他数据等
}

2. 响应式表单（搭配FormControl） #

如果你用的是响应式表单，除了selectionChange，还可以通过FormControl的valueChanges Observable来监听值的变更：

模板代码 #

<mat-select formControlName="fruitSelect">
  <mat-option value="apple">苹果</mat-option>
  <mat-option value="banana">香蕉</mat-option>
  <mat-option value="orange">橙子</mat-option>
</mat-select>

组件类代码 #

import { FormBuilder, FormGroup } from '@angular/forms';

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    fruitSelect: ['apple'] // 默认选中苹果
  });
}

ngOnInit() {
  // 监听FormControl的值变更
  this.myForm.get('fruitSelect')?.valueChanges.subscribe(selectedValue => {
    console.log('选中值变更:', selectedValue);
    // 执行你的业务逻辑
  });
}

小提示 #

• selectionChange是Angular Material为mat-select专门设计的事件，只会在用户通过交互（点击选项）或者代码主动修改选中值时触发，能提供组件相关的额外信息。
• 如果你习惯用通用的表单事件，(ngModelChange)也能生效，但它是Angular表单的通用事件，不包含mat-select的特定信息，所以更推荐用selectionChange。

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