不使用FormControl时如何通过代码修改Mat-Select的值

下面两种方案完全不需要依赖FormControl，适配不同的开发权限场景：

方案1：可调用Angular API场景（能访问组件代码） #

通过@ViewChild直接获取MatSelect组件实例操作，是最稳定的方案：

1. 给页面中的mat-select添加模板引用

<mat-select #yourSelect placeholder="选择项">
  <mat-option value="opt1">选项A</mat-option>
  <mat-option value="opt2">选项B</mat-option>
</mat-select>

2. 在组件类中获取实例并赋值

import { MatSelect } from '@angular/material/select';
// 组件类内声明
@ViewChild('yourSelect') selectRef: MatSelect;

// 需要修改值时调用
modifySelectValue() {
  // 直接赋值为目标value即可
  this.selectRef.value = 'opt2';
  // 如需主动触发值变更事件，追加下面一行
  this.selectRef.valueChange.emit(this.selectRef.value);
}

注意：如果option绑定的是对象类型value，需要保证赋值的对象和option绑定的对象是同一个内存引用，否则无法正常识别选中状态。

方案2：仅能使用原生JS操作场景（第三方平台嵌入开发） #

如果无法接触Angular层代码，只能通过原生DOM操作实现：

// 等待mat-select渲染完成后执行
setTimeout(() => {
  // 获取mat-select DOM节点
  const selectDom = document.querySelector('mat-select'); // 可替换为你实际的选择器
  // 匹配目标option，此处根据ng-reflect-value属性匹配，也可以根据文本内容匹配
  const targetOption = Array.from(selectDom.querySelectorAll('mat-option'))
    .find(opt => opt.getAttribute('ng-reflect-value') === '你的目标值');
  // 模拟点击触发选中逻辑
  targetOption?.click();
  // 如需手动触发change事件追加下面一行
  selectDom.dispatchEvent(new Event('change'));
}, 0);

如果option的value是对象，可以换用文本匹配：
.find(opt => opt.textContent.trim() === '目标选项文本')

内容的提问来源于stack exchange，提问作者J M Smith