如何通过TypeScript重置Angular Material选择器的值为默认标签？

有两种简单可靠的方法可以在TypeScript中清除Mat-Select的选中值，使其回到显示<mat-label>Select Member</mat-label>的初始状态：

方法一：通过ViewChild操作MatSelect实例 #

这种方法不需要额外绑定变量，直接获取组件实例并重置值：

1. 修改模板，添加模板引用变量 #

给<mat-select>添加一个模板引用变量（比如#memberSelect）：

<mat-form-field appearance="fill">
  <mat-label>Select Member</mat-label>
  <mat-select 
    (selectionChange)="getAthleteAnalytics($event.value)" 
    id="member-select"
    #memberSelect>
    <mat-option *ngFor="let member of members" [value]="member.id">
      {{member.firstName}} {{member.lastName}}
    </mat-option>
  </mat-select>
</mat-form-field>

2. 在组件中获取实例并重置 #

通过ViewChild获取MatSelect实例，在内部事件触发时将其值设为null，或者调用clear()方法：

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

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  @ViewChild('memberSelect') memberSelect!: MatSelect;
  members: any[] = []; // 你的成员列表数据

  // 内部事件触发的方法（比如按钮点击、其他业务事件）
  onInternalEventTriggered() {
    // 方式1：直接设置value为null
    this.memberSelect.value = null;
    // 方式2：调用MatSelect内置的clear方法
    // this.memberSelect.clear();
  }

  getAthleteAnalytics(memberId: number) {
    // 你原有的处理逻辑
  }
}

方法二：使用双向绑定ngModel #

如果需要在组件中跟踪选中值，推荐使用双向绑定的方式：

1. 修改模板，添加ngModel绑定 #

给<mat-select>添加双向绑定[(ngModel)]：

<mat-form-field appearance="fill">
  <mat-label>Select Member</mat-label>
  <mat-select 
    (selectionChange)="getAthleteAnalytics($event.value)" 
    id="member-select"
    [(ngModel)]="selectedMemberId">
    <mat-option *ngFor="let member of members" [value]="member.id">
      {{member.firstName}} {{member.lastName}}
    </mat-option>
  </mat-select>
</mat-form-field>

2. 在组件中重置绑定变量 #

定义绑定的变量，初始设为null，内部事件触发时将其重置为null即可：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  selectedMemberId: number | null = null; // 绑定的选中值变量，初始为null
  members: any[] = []; // 你的成员列表数据

  onInternalEventTriggered() {
    // 重置变量，MatSelect会自动恢复初始状态
    this.selectedMemberId = null;
  }

  getAthleteAnalytics(memberId: number) {
    // 你原有的处理逻辑
    // 注：双向绑定会自动同步选中值，这里可以省略手动赋值，若业务需要则保留
    // this.selectedMemberId = memberId;
  }
}

两种方法都能实现需求：方法一更直接，适合不需要跟踪选中值的场景；方法二更符合Angular的数据驱动理念，适合需要在组件中使用选中值的业务场景。

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