Angular中ngModel绑定select占位符不显示，求兼顾取值的解决方案

问题根源 #

1. 同时给<select>绑定了[value]和[(ngModel)]，二者冲突导致ngModel的优先级覆盖了初始占位符的显示逻辑。
2. 未设置专门的占位符<option>，仅把初始值硬编码为字符串，但选项列表里不存在该值，ngModel无法匹配对应选项，导致占位符不显示。

修改后的代码 #

HTML 模板

<select [(ngModel)]="selected_tipo">
  <!-- 禁用的占位符选项，默认选中且不可被用户选择 -->
  <option disabled selected value="">Select an option</option>
  <!-- 用属性绑定[value]替代插值语法，更符合Angular规范 -->
  <option *ngFor="let tipo of tipos" [value]="tipo.tipos">
    {{tipo.descrip}}
  </option>
</select>

TypeScript 代码

tipos = [
  {
    tipos: 'HEXO',
    descrip: 'Hora extra',
  },
  {
    tipos: 'HEXN',
    descrip: 'Hora extra Nocturna',
  }]

// 初始值设为空字符串，对应占位符option的value
public selected_tipo: string = '';

关键说明 #

• 移除[value]绑定：[(ngModel)]已实现双向绑定，重复绑定会引发逻辑冲突，完全不需要额外的[value]。
• 占位符选项设置：通过disabled禁止用户选中，selected确保初始渲染时显示，value=""与TS中的初始空值匹配，ngModel初始绑定空值时会自动选中该占位符选项。
• 获取选中值：直接通过this.selected_tipo即可拿到选中的选项值，无需使用document.getElementById这类原生DOM操作，这是Angular数据绑定的最佳实践。

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