Angular中仅有两个选项时如何设置select option的默认值

在使用Angular的[(ngModel)]双向绑定下拉框时，原生selected属性不会生效，默认选中项由绑定的变量值与option的[ngValue]匹配结果决定，可按以下两种场景实现需求：

• 场景1：默认选中提示占位项
  1. 组件ts文件中初始化绑定变量authenticationType为undefined，和占位option的[ngValue]值保持一致
  2. 可直接删除占位option上的selected属性，Angular会自动匹配值完成选中
• 场景2：默认选中两个业务选项中的任意一个
  1. 统一两个业务option的值绑定方式为[ngValue]，避免类型匹配异常
  2. 组件ts文件中初始化authenticationType为对应选项的值即可，比如要默认选中ALIGNOR AUTHENTICATION，就赋值为'ALIGNOR_AUTHENTICATION'

修改后代码示例 #

模板代码 #

<select class="form-control" 
   aria-placeholder="select auth type" id="auth_type" 
   [(ngModel)]="authenticationType" 
   name="auth_type"
   #auth_type="ngModel" 
   (change)="changeAuthenticationType($event)" required>
    <option [ngValue]="undefined" disabled>{{'AUTHENTICATION_CONFIGURATION.SELECT_TYPE' | translate}}</option>
    <option [ngValue]="'ALIGNOR_AUTHENTICATION'">ALIGNOR AUTHENTICATION</option>
    <option [ngValue]="'COGNITO_AUTHENTICATION'">COGNITO AUTHENTICATION</option>
</select>

组件TS代码 #

默认选中占位项

// 组件类中声明并初始化变量
authenticationType: string | undefined = undefined;

默认选中ALIGNOR_AUTHENTICATION

authenticationType: string = 'ALIGNOR_AUTHENTICATION';

注意事项 #

需要保证绑定变量的值和option的[ngValue]完全匹配，包括数据类型，避免出现字符串和枚举值混用导致匹配失败的问题。

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