Angular4中ngModel将number类型转为string的问题

嘿，我之前也碰到过这个一模一样的烦人的问题！Angular的ngModel在处理type="text"输入框和TypeScript的number类型字段绑定时，确实会自动把输入值转成字符串，而换成type="number"输入框后自带的增减按钮又完全不符合需求。给你几个实用的解决思路：

方法一：用Getter/Setter手动处理类型转换 #

在你的组件类里给目标字段定义getter和setter，把输入的字符串自动转成数字：

// 组件类里的代码
private _myNumberField: number;

get myNumberField(): number {
  return this._myNumberField;
}

set myNumberField(value: any) {
  // 根据你的需求处理空值，比如设为null或者0
  this._myNumberField = value ? Number(value) : null;
}

然后模板里还是用type="text"的输入框绑定：

<input type="text" [(ngModel)]="myNumberField">

这样用户输入的字符串会被setter自动转成number类型存储，完美避开类型转换问题。

方法二：直接在模板里用ngModelChange处理转换 #

不想改组件代码的话，可以直接在模板里通过ngModelChange事件手动转换值：

<input 
  type="text" 
  [ngModel]="myNumberField" 
  (ngModelChange)="myNumberField = $event ? +$event : null"
>

这里的+$event是把字符串转成数字的简写方式，空值时设为null（你也可以改成0或者其他默认值），实现了类似双向绑定的效果，同时保证字段类型是number。

方法三：隐藏Number输入框的增减按钮（备选方案） #

如果你其实愿意用type="number"，只是讨厌那些微调按钮，试试这段CSS，几乎能覆盖所有主流浏览器：

/* 隐藏Chrome、Safari的内置微调按钮 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* 隐藏Firefox的微调按钮 */
input[type=number] {
  -moz-appearance: textfield;
}

这段CSS一般都能正常生效，之前可能是你没写全浏览器前缀？可以试试这个方案，毕竟type="number"本身也能限制用户输入非数字内容。

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