如何点击按钮将mat-select重置为初始默认显示状态

你现有代码的核心问题有两个：一是默认占位的<mat-option>未显式绑定值时，组件内部默认匹配值为undefined，之前如果直接赋值null会因为值不匹配无法选中默认项；二是模板里存在变量名拼写不一致的笔误，会干扰逻辑运行。
不需要操作DOM、不需要调用组件实例方法，按照Angular的双向绑定逻辑修改即可，界面会直接展示默认的“Select an option...”占位状态：

• 统一模板里的变量名，把按钮点击的逻辑抽成类方法，在方法里同时处理原有列表切换和选中值重置
• 重置时将mat-select双向绑定的accountSelected赋值为和默认选项匹配的值，组件会自动选中默认占位项

修正后的完整代码 #

组件模板（HTML） #

<div *ngIf="listAccounts">
  <mat-select [(value)]="accountSelected">
    <!-- 无显式value绑定的默认选项，内部匹配值为undefined -->
    <mat-option>Select an option...</mat-option>
    <mat-option 
      [value]="account" 
      *ngFor="let account of listOfAccounts" 
      (click)="yourFunction(account)"
    >
      Account {{account.accountNumber}} Agency {{account.agencyNumber}} Digit {{account.digitNumber}}
    </mat-option>
  </mat-select>
</div>
<button (click)="handleButtonClick()">Button</button>

组件逻辑（TS） #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  // 显隐控制变量，和模板*ngIf绑定名保持一致
  listAccounts = true;
  // 账户列表数据
  listOfAccounts: Array<{
    accountNumber: string | number;
    agencyNumber: string | number;
    digitNumber: string | number;
  }> = [];
  // mat-select绑定的选中值
  accountSelected: any;

  handleButtonClick() {
    // 原有列表显隐切换逻辑
    this.listAccounts = !this.listAccounts;
    // 核心重置逻辑：赋值为undefined匹配默认占位选项
    this.accountSelected = undefined;
  }

  yourFunction(account: any) {
    // 原有选项点击业务逻辑
  }
}

可选优化写法 #

如果觉得undefined语义不清晰，可以给默认占位选项显式绑定空值，重置时对应赋值即可，效果完全一致：

<!-- 给默认选项显式绑定空字符串作为值 -->
<mat-option [value]="''">Select an option...</mat-option>

对应重置逻辑修改为：

// 匹配默认选项的空字符串值
this.accountSelected = '';

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