如何在使用ngModel、ngValue时设置select默认选中值及添加占位符

核心匹配规则 #

Angular中ngModel和ngValue的匹配逻辑：

• 如果ngValue绑定的是字符串、数字、布尔值等基础类型，按内容值匹配
• 如果ngValue绑定的是对象类型，按引用地址匹配，仅当两者指向内存中同一个对象时才会判定为匹配

占位符实现方法 #

在select的第一个option位置新增占位符选项，统一配置规则：

• [ngValue]设置为和ngModel初始值相同的值（常用null或空字符串''）
• 加disabled属性，避免用户选中占位符作为有效选项
• 加hidden属性，用户展开下拉列表时不会显示占位符选项

默认选中实现方案 #

场景1：ngValue绑定对象（排序选择示例） #

原写法直接在模板里写对象字面量会出现匹配失效问题，因为模板里定义的对象和组件里赋值的对象是不同引用，需要统一在组件里定义选项保证引用唯一：

组件TS代码

// 统一维护排序选项，保证引用唯一
sortOptions = [
  {
    label: '从低价到高价',
    value: {sortBy: 'price', sortOrder: 'asc'}
  },
  {
    label: '从高价到低价',
    value: {sortBy: 'price', sortOrder: 'desc'}
  },
  {
    label: '按评分排序',
    value: {sortBy: 'rating', sortOrder: 'desc'}
  }
]
// 要默认选中第2项（从高到低），直接赋值对应引用即可
defaultSelect = this.sortOptions[1].value;
// 要默认显示占位符的话，赋值为null即可
// defaultSelect = null;

模板HTML代码

<select [(ngModel)]="defaultSelect" (change)="onChangeGoods(query_param)" #query_param="ngModel" name="query_param" >
  <!-- 占位符选项 -->
  <option [ngValue]="null" disabled hidden>请选择排序方式</option>
  <option *ngFor="let option of sortOptions" [ngValue]="option.value">{{option.label}}</option>
</select>

场景2：ngValue绑定基础类型（品牌选择示例） #

基础类型按内容值匹配，只需要保证ngModel初始值和占位符/默认选项的ngValue相等即可：

组件TS代码

// 初始赋值为空字符串，和占位符的ngValue匹配，默认显示占位符
goods_for_brands[i] = '';
// 要默认选中某个品牌的话，直接赋值对应品牌字符串即可
// goods_for_brands[i] = '华为';

模板HTML代码

<select [(ngModel)]="goods_for_brands[i]" (change)="onChangeBrand(brand)" #brand="ngModel" name="brand" id="brand" >
  <!-- 占位符配置 -->
  <option [ngValue]="" disabled hidden>请选择品牌</option>
  <option [ngValue]="good.brand" *ngFor="let good of goods_for_brands">{{good.brand}}</option>
</select>

常见踩坑 #

• 不要直接在模板里给ngValue写对象字面量，同时在组件里给ngModel赋值结构相同的新对象，两者引用不同会导致匹配失败
• 占位符的ngValue必须和ngModel初始值完全一致，否则默认不会显示占位符
• 不要省略占位符的disabled属性，否则表单提交时可能会把空值作为有效参数提交

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