Angular中HTML Select点击重置按钮无法恢复默认选项问题排查

核心错误点 #

• Angular中<select>组件的选中状态绑定应该使用双向绑定[(ngModel)]，而非原生的[selected]属性。[selected]是DOM原生属性，无法和Angular组件状态做响应式同步，导致重置时状态更新无法同步到视图。
• 重置方法中把sectorSelect赋值为空字符串""，但你的选项value都是filterSector数组中的具体值，空字符串无法匹配任何现有选项，自然不会选中第一个选项。

修正后的代码 #

HTML部分（Select组件）

<div class="col-lg-2 col-md-2">
  <select class="form-select selectFilter" [(ngModel)]="sectorSelect" (change)="refreshSelect($event, 'sector')">
    <option *ngFor="let currentData of filterSector" [value]="currentData">{{currentData}}</option>
  </select>
</div>

TypeScript重置方法

resetSelect(e, mode) {
  if (mode === "Reset") {
    // 重置为filterSector数组的第一个元素
    this.sectorSelect = this.filterSector[0] || "";        
  }
}

额外说明 #

如果需要保留“默认空选项”（比如显示"请选择"），可以在<select>中手动添加第一个空选项，此时重置赋值为空字符串就能选中它：

<div class="col-lg-2 col-md-2">
  <select class="form-select selectFilter" [(ngModel)]="sectorSelect" (change)="refreshSelect($event, 'sector')">
    <option value="">请选择</option>
    <option *ngFor="let currentData of filterSector" [value]="currentData">{{currentData}}</option>
  </select>
</div>

这种情况下，重置方法保持赋值this.sectorSelect = ""即可。

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