number 使用 NgModel 绑定变成字符串答案

【问题标题】：number becomes string using NgModel bindingnumber 使用 NgModel 绑定变成字符串
【发布时间】：2017-05-31 14:56:29
【问题描述】：

我不理解 Typescript 和 Angular 的这种行为。

my-component.html

  <ion-select [(ngModel)]="creditAmount"
              (ngModelChange)="onChangeCreditAmount()">
    <ion-option value="25" selected="true">25€</ion-option>
    <ion-option value="50">50€</ion-option>
    <ion-option value="75">75€</ion-option>
    <ion-option value="100">100€</ion-option>
  </ion-select>

my-component.ts

  creditAmount: number;

  constructor() {
    this.creditAmount = 25;
    console.log(this.creditAmount);
  }
  onChangeCreditAmount() {
    console.log(this.creditAmount);
  }

在构造函数中，creditAmount 是一个数字。在onChangeCreditAmount 方法中，它变成了一个字符串。

我发现的唯一解决方法是使用显式强制转换：Number(this.creditAmount) 但这对我来说似乎很老套。有没有更好的办法？谢谢。

【问题讨论】：

标签： angular typescript

【解决方案1】：

另一种方法是使用+ 运算符，方式如下：

const str = '10';
const dig = +str;

console.log(str + ', ' + typeof str);
console.log(dig + ', ' + typeof dig);

输出：

10, string
10, number

【讨论】：

是的，我看到了 :) 类似的显式转换 :)

【解决方案2】：

Typescript 仅有助于编译时间。结果仍然是一些 JavaScript，它不是类型安全的。所以你可以给creditAmount分配一个数字、一个字符串、一个数组或者任何你喜欢的东西。

NgModel 似乎只适用于字符串，因此如果需要数字，则必须对其进行解析。对不起:-(

【讨论】：

谢谢。你是对的打字稿。 Angular 本身呢？ :)
Angular 在运行时不知道类型。它仅从所选选项中读取“值”。默认情况下，这个值似乎是一个字符串:-)