如何用Angular Material清除下拉菜单？点击清除按钮无效问题咨询

问题原因 #

• 选项类型混用：在原生<select>中混用了mat-option和普通<option>，原生select不支持mat-option组件，导致[value]="null"的选项无法被正确识别与绑定。
• 值不匹配：初始active值为空字符串""，清除时设置this.active = ''，但下拉菜单中没有value=""的对应选项，ngModel无法匹配到选项，因此视图不会更新。

修复方案 #

方案1：使用空字符串作为清空状态 #

调整模板代码

将mat-option替换为原生<option>，并添加value=""的选项：

<mat-form-field class="custom-form-field" name="active"  
  [(ngModel)]="active" [ngModelOptions]="{standalone: true}"
>
  <mat-label>Choose an option</mat-label>
  <select matNativeControl >
    <option value="">请选择</option>
    <option value="1">True</option>
    <option value="2">False</option>
  </select>
</mat-form-field>

保持组件代码不变

// 初始值
active: string = "";

// 清除方法
clear() {
  this.active = '';
}

方案2：使用null作为清空状态 #

如果希望用null表示空状态，可按以下调整：

组件代码修改

// 初始值改为null
active: string | null = null;

// 清除方法设置为null
clear() {
  this.active = null;
}

模板代码修改

将空选项的value绑定为null：

<mat-form-field class="custom-form-field" name="active"  
  [(ngModel)]="active" [ngModelOptions]="{standalone: true}"
>
  <mat-label>Choose an option</mat-label>
  <select matNativeControl >
    <option [value]="null">请选择</option>
    <option value="1">True</option>
    <option value="2">False</option>
  </select>
</mat-form-field>

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