Angular 2/5中select控件获取数值数据出现异常问题咨询

这个问题我之前也踩过坑，大概率不是你操作的疏漏，而是Angular处理select选项值类型时的一个常见“小陷阱”！

问题根源 #

Angular对select控件的选项值类型匹配要求很严格：

• 当你写<option value="*">*</option>时，这个值是字符串类型，如果组件里绑定的变量也是字符串，就能正常匹配；
• 但如果写<option value="1">1</option>，HTML里的value属性会默认被解析成字符串，但如果Angular尝试把它转换成数字类型（比如组件里的绑定变量是数字），或者反过来组件变量是字符串但Angular误判选项值为数字，就会出现类型不匹配，最终返回undefined；
• 而你改成"1st"后能正常工作，正是因为它是纯字符串，和*的类型完全一致，避免了类型匹配冲突。

可行的解决方案 #

这里有几种简单的调整方法，都能解决问题：

1. 显式将数字选项转为字符串绑定

用[value]语法把数字包裹成字符串，确保所有选项值都是字符串类型：

<select (change)="valueChanged($event)">
  <option [value]="'*'">*</option>
  <option [value]="'1'">1</option>
  <option [value]="'2'">2</option>
  <!-- 其他数字选项依此类推 -->
</select>

这样不管选*还是数字，传递给valueChanged的都是字符串，类型完全匹配。

2. 统一使用ngValue绑定（更推荐）

ngValue是Angular提供的更灵活的绑定方式，支持任意类型的值（字符串、数字、对象都可以），能自动处理类型匹配：

<select [(ngModel)]="selectedValue" (change)="valueChanged()">
  <option [ngValue]="'*'">*</option>
  <option [ngValue]="1">1</option>
  <option [ngValue]="2">2</option>
  <!-- 其他数字选项 -->
</select>

这种方式下，selectedValue可以是字符串或数字类型，Angular都会正确关联选项值。

3. 确保组件变量与选项值类型一致

如果组件里的selectedValue是数字类型，那直接把选项值绑定为数字即可：

<select [(ngModel)]="selectedValue" (change)="valueChanged()">
  <option [ngValue]="0">*</option> <!-- 用特定数字代表*，比如0 -->
  <option [ngValue]="1">1</option>
  <option [ngValue]="2">2</option>
</select>

当然这种需要你把*对应的值也调整为数字类型，适合业务允许的场景。

总结 #

这不是你的操作问题，也算不上Angular的bug，只是它对类型匹配的严格性导致的常见问题。按照上面的方法调整后，数字选项就能正常返回值了，不用当成bug反馈给客户~

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