Angular中ngModel值为null时自动选中null选项的实现问题

API 探路者

2026-7-27

Angular Select 默认选项在 ngModel 为 null 时不选中的解决办法

你的问题出在默认选项上同时设置了selected、空value和[ngValue]="null"，Angular的双向绑定([(ngModel)])会覆盖手动设置的selected属性，而且空value会干扰ngValue的匹配逻辑。

直接修改默认选项即可：

<select [(ngModel)]="personalSettings.selectedTimeZone" class="form-control">
  <!-- 移除selected和空value属性，只保留ngValue="null"和disabled -->
  <option [ngValue]="null" disabled>Select your time zone</option>
  <option *ngFor="let timeZone of personalSettings.timeZoneList" [ngValue]="timeZone.id">
    {{ timeZone.description }}
  </option>
</select>

补充说明：

Angular会自动匹配ngModel的值和选项的ngValue，当personalSettings.selectedTimeZone为null时，会自动选中[ngValue]="null"的选项，不需要手动加selected。
如果API返回的selectedTimeZone可能是undefined而不是null，需要在组件代码里做个转换，比如在获取API数据后：
```
this.personalSettings.selectedTimeZone = this.personalSettings.selectedTimeZone ?? null;
```
确保绑定的值和选项的ngValue类型完全一致，Angular的表单绑定对类型匹配要求严格。