mat-select绑定数字类型value时无法显示选中项该如何解决？

问题根源和修复方案 #

代码存在3个导致选中值无法匹配的错误，按如下方式修改即可：

1. 标签错误：使用了原生<select>开头却用</mat-select>闭合，正确的Material选择器必须统一用<mat-select>标签
2. 冗余绑定：响应式表单中已经通过formControlName关联了控件，额外加的[value]="commision"会造成值绑定冲突，直接删除即可
3. 类型不匹配：未加方括号的value=0.15实际会被解析为字符串类型，而表单控件中存储的是数字类型，Angular默认按严格相等（===）匹配值，二者类型不同无法匹配成功。

修正后的完整代码

<mat-select formControlName="commision" style="width: 37%" disableRipple>
  <mat-option [value]="null" disabled selected>Select Commission</mat-option>
  <mat-option [value]="0.15">15%</mat-option>
  <mat-option [value]="0.2">20%</mat-option>
  <mat-option [value]="0.3">30%</mat-option>
</mat-select>

补充说明

如果后续需要绑定复杂对象作为option值，可通过compareWith属性自定义匹配规则，示例如下：

<mat-select formControlName="xxx" [compareWith]="compareFn">
  <!-- option列表 -->
</mat-select>

对应ts代码：

compareFn(o1: any, o2: any): boolean {
  // 可自定义匹配逻辑，比如按对象id匹配
  return o1?.id === o2?.id;
}

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