如何在向父组件传递值后清除mat-select的选中状态？

问题根源 #

你的代码同时使用了[(ngModel)]和[(value)]双向绑定，这会导致绑定冲突；另外将activityType设为空字符串''，无法匹配Mat-Select的“未选中”状态（你的选项值都是非空字符串）。

修复步骤及代码 #

1. 修正HTML模板

移除重复的[(value)]绑定，只保留[(ngModel)]：

<mat-select
  (selectionChange)="selectEvent($event, InteractionEvent.ADD_ACTIVITY)"
  [(ngModel)]="activityType"
>
  <mat-option [value]="'GATHER'">{{ 'GATHER' | translate | async }}</mat-option>
  <mat-option [value]="'VOTE'">{{ 'VOTE' | translate | async }}</mat-option>
  <mat-option [value]="'RANK'">{{ 'RANK' | translate | async }}</mat-option>
  <mat-option [value]="'SCORE'">{{ 'SCORE' | translate | async }}</mat-option>
</mat-select>

2. 修正TypeScript逻辑

将activityType设为null（而非空字符串），若仍存在UI不更新问题，可手动触发变更检测：

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

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

selectEvent(event, type) {
  this.receiveEventOccur.emit({ event: event.value, type: type });
  // 设置为null以触发未选中状态
  this.activityType = null;
  // 若UI仍未更新，强制触发变更检测
  this.cdr.detectChanges();
}

原理说明 #

• Mat-Select的双向绑定只需[(ngModel)]即可，重复绑定会导致状态同步异常。
• 选项值均为非空字符串，null是Mat-Select识别“未选中”状态的标准值，空字符串无法触发状态切换。
• 部分场景下（如自定义事件回调），Angular自动变更检测可能未触发，调用detectChanges()可强制更新UI。

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