Angular 12响应式表单中，如何从TS触发mat-select的selectionChange事件？

在Angular 12的响应式表单中，手动操作mat-select会触发(selectionChange)事件，但通过formControl.setValue()代码赋值时，该事件不会自动触发。以下是几种可行的解决方法：

方法1：手动调用事件处理函数 #

直接在设置表单值后，手动构造MatSelectChange事件对象并调用你的处理函数，无需依赖UI交互触发。

步骤： #

1. 在组件中通过@ViewChildren获取所有mat-select实例：

import { MatSelect, MatSelectChange } from '@angular/material/select';
import { ViewChildren, QueryList } from '@angular/core';

export class YourComponent {
  @ViewChildren(MatSelect) selects!: QueryList<MatSelect>;
  // ... 其他代码
}

2. 修改设置值的逻辑，添加事件触发代码：

setMatSelectValue(aliasName: string, formattedValue: any, property: { [key: string]: string }) {
  const control = this.form.get(aliasName);
  if (control) {
    // 设置表单控件值
    control.setValue(formattedValue);
    // 找到对应ID的mat-select实例
    const targetSelect = this.selects.find(select => select.id === this.getIdProperty(property));
    if (targetSelect) {
      // 构造事件对象并调用处理函数
      const changeEvent = new MatSelectChange(targetSelect, formattedValue);
      this.selectChangeDetected(changeEvent, property);
    }
  }
}

方法2：抽离业务逻辑，直接调用核心函数 #

如果你的selectChangeDetected函数中，核心业务逻辑只依赖选中值和property参数，可将业务逻辑抽离为单独函数，代码设置值后直接调用该函数，无需构造事件对象。

步骤： #

1. 抽离业务逻辑：

// 原事件处理函数
selectChangeDetected(event: MatSelectChange, property: { [key: string]: string }): void {
  this.handleSelectBusinessLogic(event.value, property);
}

// 抽离的核心业务逻辑函数
handleSelectBusinessLogic(selectedValue: any, property: { [key: string]: string }): void {
  // 你的数据处理逻辑
}

2. 设置值时直接调用核心函数：

this.form.get(aliasName)?.setValue(formattedValue);
// 直接调用业务逻辑函数
this.handleSelectBusinessLogic(formattedValue, property);

方法3：监听表单控件的valueChanges #

利用响应式表单控件的valueChanges Observable，订阅值变化事件，无论手动操作还是代码赋值都会触发。

步骤： #

在组件初始化时（如ngOnInit）订阅控件值变化：

ngOnInit(): void {
  // 假设你有一个property列表，遍历订阅每个控件
  this.properties.forEach(property => {
    const controlName = this.getPropertyKey(property);
    const control = this.form.get(controlName);
    if (control) {
      control.valueChanges.subscribe(selectedValue => {
        // 调用业务逻辑或事件处理函数
        const targetSelect = this.selects.find(select => select.id === this.getIdProperty(property));
        if (targetSelect) {
          const event = new MatSelectChange(targetSelect, selectedValue);
          this.selectChangeDetected(event, property);
        }
      });
    }
  });
}

注意：订阅后需在组件销毁时取消订阅，避免内存泄漏，可使用takeUntil操作符实现。

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