函数参数指定数字，但接收字符串。

Question

我试图从文本字段中的输入调用一个9角的服务函数，以将摄氏转换为开尔文。我指定了一个计算摄氏度的函数，以便通过增加273.15来计算开尔文。相反，它在前端连接。我测试了代码，确定它在接受字符串为number后返回字符串。转换为一个数字可以解决这个问题，但是有人能帮助我理解为什么输入没有失败，或者至少在飞行中投了它？

    public convertCToK(celsius: number): number { // e.g. celsius = 1
        console.log(typeof celsius); // returns 'string'
        // return celsius + 273.15; returns 1273.15
        return Number(celsius) + 273.15; // returns 274.15
    }

调用函数和HTML

    fahrenheit: number;
    celsius: number;
    kelvin: number;

    changeC() {
      if (!isNaN(this.celsius)) {
        this.fahrenheit = Math.round(this.calcService.convertCToF(this.celsius) * 100) / 100;
        this.kelvin = Math.round(this.calcService.convertCToK(this.celsius) * 100) / 100;
      }
    }

    <h2>Fahrenheit:
      <label>
        <input style="color:green" type='text' [(ngModel)]='fahrenheit' (keyup)="changeF()">
      </label>
    </h2>
    <hr>
    <h2>Celsius:
      <label>
        <input style='color:blue' type='text' [(ngModel)]="celsius" (keyup)="changeC()">
      </label>
    </h2>
    <hr>
    <h2>Kelvin:
      <label>
        <input style="color:red" type='text' [(ngModel)]='kelvin' (keyup)="changeK()">
      </label>
    </h2>

Answer 1

因为您的<input>被定义为type="text"，所以输入将是一个字符串(即使您键入一个数字)。

如果传入方法的isNaN(someString)函数也可以作为数字读取，则someString函数将返回false，例如"123“。参见w3school中的一些示例

因为这是一个运行时问题(因为您在类型记录文件中定义了celsius: number;，但是html确实为您提供了一个字符串)，所以您不会得到“编译错误”。更改输入中的type="number"将解决您所面临的问题，但也将为您的输入提供不同的UI。

当您尝试接受一个string + number的和(即使字符串是"10“或其他类似于数字的字符串)，您可能会得到意想不到的结果。

旁注

键入Number(celsius)与强制转换不一样。您正在将字符串转换为数字。如果你想转换它，你可以写<Number> celsius 关于铸造的相关答案

Answer 2

将文本输入绑定到属性总是会导致该属性在更新时被设置为字符串。将其声明为数字类型对运行时值没有影响，类型记录只会在设计时帮助您。

如果要将绑定到输入的属性视为数字，则应将输入类型设置为number。

<input style='color:blue' type='number' [(ngModel)]="celsius" (keyup)="changeC()">

演示：https://stackblitz.com/edit/angular-dskyke

注意，在我的演示中，绑定到文本输入的属性是如何从数字开始的。当它们被更新时，它们就变成了字符串。