Angular Material表单选择需点击两次才显示选中值问题

嘿，我之前也碰到过这个烦人的问题！你遇到的这个情况大概率是双向绑定和(change)事件的逻辑冲突，或者是变更检测没及时触发导致视图没同步。下面给你几个一步步解决的方案：

1. 把[(value)]换成[(ngModel)]（更贴合Angular表单规范） #

Angular Material的mat-select其实更推荐用ngModel来做双向绑定，直接用[(value)]有时候会和事件处理产生冲突。修改你的HTML代码：

<mat-form-field>
  <mat-select [(ngModel)]="_reserveDate.reserverStartH" (ngModelChange)="reserverStartH($event)" placeholder="debut du rendez-vous">
    <mat-option [value]="null">None</mat-option>
    <mat-option value="8">8H</mat-option>
    <mat-option value="9">9H</mat-option>
    <mat-option value="10">10H</mat-option>
    <!-- 剩下的选项继续保留 -->
  </mat-select>
</mat-form-field>

注意把None选项的value设为null，这样如果你的初始值是未定义或者null的话，能和选项匹配上，避免初始选中状态异常。

2. 调整reserverStartH方法的逻辑 #

原来的(change)事件里你传的是_reserveDate.reserverStartH，但用ngModelChange的话，直接拿$event就是选中的新值，不用再去读绑定的变量，这样就不会有值同步的冲突了：

reserverStartH(selectedValue: string | null) {
  // 这里直接用selectedValue做后续逻辑就行，比如：
  this._reserveDate.reserverStartH = selectedValue;
  // 其他业务逻辑，比如更新相关数据、发请求之类的
}

其实更省心的是，因为[(ngModel)]已经自动帮你更新了_reserveDate.reserverStartH，你甚至可以不用手动赋值，只在方法里处理业务逻辑：

reserverStartH(selectedValue: string | null) {
  // 比如在这里处理选中后的其他操作，比如联动其他表单控件
}

3. 手动触发变更检测（如果上面的方法没生效） #

要是还是有问题，可能是Angular的变更检测没及时触发。你可以在组件里注入ChangeDetectorRef，然后在方法里手动触发：

import { ChangeDetectorRef } from '@angular/core';

// 组件构造函数里注入
constructor(private cdr: ChangeDetectorRef) {}

reserverStartH(selectedValue: string | null) {
  this._reserveDate.reserverStartH = selectedValue;
  this.cdr.detectChanges(); // 手动告诉Angular更新视图
  // 其他逻辑...
}

4. 检查初始值的类型是否匹配 #

最后别忘了确认_reserveDate.reserverStartH的初始值和选项里的value类型一致！比如选项的value是字符串"8"，那初始值别设成数字8，不然第一次点击后Angular要同步类型，就会出现点两次才显示的情况。

额外小提示 #

尽量别在(change)或者(ngModelChange)里手动修改绑定的变量，双向绑定已经自动帮你做了，重复赋值很容易导致视图和数据不同步。如果用的是响应式表单，那直接用formControlName绑定会更靠谱哦！

内容的提问来源于stack exchange，提问作者geek pédagogique lcms