Angular mat-select清空字段后历史选中值仍被高亮的问题求助

这个问题我之前也碰到过，本质是因为你绑定到mat-option的[value]是对象类型（status），当你用reset()或setValue(null)把控件值设为null时，Angular Material的mat-select内部可能还保留着之前选中的对象引用，导致视觉上仍显示高亮状态。下面给你几个可行的解决办法：

方法1：改用对象的唯一标识作为value（推荐） #

把mat-option的[value]绑定为status的唯一属性（比如id），而不是整个对象。这样清空时设为null就能完美同步状态，不会出现视觉不一致的情况：

修改模板代码：

<mat-form-field id="statusField">
  <mat-select disableOptionCentering placeholder="Status" formControlName="statusField">
    <mat-option *ngFor="let status of allTaskStatuses; trackBy: trackByFn" [value]="status.id">
      {{ status.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

如果后续需要获取完整的status对象，你可以通过id从allTaskStatuses数组里匹配对应的对象就行。

方法2：手动同步mat-select的内部状态 #

如果必须绑定整个对象作为value，可以给mat-select加个模板引用变量，然后在清空方法里手动重置它的选中状态：

先修改模板，添加引用变量：

<mat-form-field id="statusField">
  <mat-select #statusSelect disableOptionCentering placeholder="Status" formControlName="statusField">
    <mat-option *ngFor="let status of allTaskStatuses; trackBy: trackByFn" [value]="status">
      {{ status.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

然后在组件类里获取这个引用，更新清空方法：

import { ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

// ...

@ViewChild('statusSelect') statusSelect!: MatSelect;

clearField(event: MouseEvent, fieldName: string): void {
  event.stopPropagation();
  const control = this.filterFormGroup.get(fieldName);
  control?.reset();
  // 手动重置mat-select的选中状态
  this.statusSelect.selected = null;
  this.statusSelect.value = null;
  // 触发值变化事件，确保视图同步更新
  this.statusSelect.valueChange.next(null);
}

方法3：强制触发变更检测 #

如果上面的方法都不行，还可以通过变更检测强制更新视图。先注入ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef) {}

然后修改清空方法：

clearField(event: MouseEvent, fieldName: string): void {
  event.stopPropagation();
  const control = this.filterFormGroup.get(fieldName);
  control?.reset();
  // 强制触发变更检测，让视图同步控件状态
  this.cdr.detectChanges();
}

为啥会出现这个问题？ #

当mat-option绑定对象时，mat-select是通过对象引用判断选中状态的。哪怕你把表单控件的值设为null，它内部可能没及时清空之前保存的选中对象引用，就导致视觉上还高亮着旧选项。上面的方法要么换用基本类型的value，要么手动同步内部状态，都能解决这个问题。

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