Angular中值为null时默认选中下拉框ACTIVE选项的问题

原代码的问题在于同时使用了[(ngModel)]和[selected]指令，Angular中ngModel会完全接管下拉框的选中状态，手动设置的[selected]会被覆盖，导致name.status为null时的默认选中逻辑不生效。以下是两种可行的解决方式：

方式一：组件初始化时处理默认值 #

在组件的ngOnInit（或数据加载完成后），判断name.status是否为null，若为null则主动设置为'ACTIVE'，这样ngModel会自动绑定选中对应的选项：

ngOnInit(): void {
  if (this.name?.status === null) {
    this.name.status = 'ACTIVE';
  }
}

模板代码保持简洁，移除[selected]指令：

<select name="status" [(ngModel)]="name.status">
  <option value="ACTIVE">Active</option>
  <option value="INACTIVE">Inactive</option>
</select>

方式二：模板中使用空值合并逻辑绑定 #

如果不想修改组件数据，可以利用空值合并运算符（需TypeScript 3.7+支持），直接在模板中处理默认值：

<select name="status" [ngModel]="name.status ?? 'ACTIVE'" (ngModelChange)="name.status = $event">
  <option value="ACTIVE">Active</option>
  <option value="INACTIVE">Inactive</option>
</select>

关键说明 #

• 禁止[(ngModel)]和[selected]同时使用，这是Angular表单双向绑定的基础规则。
• 优先选择方式一，将默认值逻辑放在组件中，模板更简洁，也符合数据驱动的设计思路。

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