Angular 5中Select下拉框默认选项设置问题求助

你的问题核心在于Angular的模板驱动表单中，[(ngModel)]会优先控制select的选中状态，而你的keyType初始值是''，和选项的ngValue（'Numeric'/'Random'）不匹配，所以初始时没有匹配的选项，就显示为空。原生的selected属性会被Angular忽略，这就是你之前尝试各种方法无效的原因。

下面给你两种不用修改TS代码的解决方案：

方案1：用条件绑定[selected] #

给Numeric选项添加条件判断，当keyType为空时强制选中它，这样既不影响后续的ngModel双向绑定，又能实现初始默认选中：

<select class="form-control" [(ngModel)]="keyType">
  <option [ngValue]="'Numeric'" [selected]="keyType === ''">Numeric</option>
  <option [ngValue]="'Random'">Random</option>
</select>

原理：初始时keyType === ''为true，该选项被选中；当用户选择任意选项后，keyType会被更新为对应的值，keyType === ''变为false，selected条件失效，完全由ngModel控制选中状态。

方案2：在模板中处理ngModel的初始值 #

拆分双向绑定，用单向绑定设置默认值，同时保留事件更新逻辑：

<select class="form-control" [ngModel]="keyType || 'Numeric'" (ngModelChange)="keyType = $event">
  <option [ngValue]="'Numeric'">Numeric</option>
  <option [ngValue]="'Random'">Random</option>
</select>

原理：keyType || 'Numeric'表示当keyType为空时，默认绑定'Numeric'，让选项匹配选中；用户选择选项时，通过ngModelChange事件把选中的值赋值给keyType，实现双向绑定的效果。

这两种方法都不需要修改TS侧的keyType初始值，完美适配你的需求。

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