Question

我选择的答案不是type =“ number”，因为用户只需按f12键就可以摆脱它

添加

type="number"

对我的html起作用，但这仍然不能解释为什么-在不将其添加到

的情况下起作用

因为减号是我认为它起作用的原因-不是字符串运算符，+是

我正在使用打字稿进行测试，我注意到了这一点，所以当我使用减号时，它在我使用+时可以工作，并且我不知道如何并且找不到在哪里可以找到它

我的班级：

export class Add {
number1: Number;
number2: Number;
total: Number;
}

我试图让他们进入这是我的功能

Math(): void {
let numberone = this.add.number1;
let numbertwo = this.add.number2;
this.add.total = numberone + numbertwo;
}

预期结果，其中

numberone = 10
numbertwo = 10
this.add.total = numerone + numbertwo

总数变为20，但变为1010

我的html

<h2>here you can add stuff</h2> 
<div><span>first number: </span><input [(ngModel)]="add.number1" 
placeholder="number1"></div>
<div><span>second number: </span><input [(ngModel)]="add.number2" 
placeholder="number2"></div>
<button (click)="Math()">press here to add</button> <label>{{add.total}}</label>

Answer 1

您应该使用number，而不是Number

Number不是一种类型，它是es5的接口。这是它的定义

interface Number {
    /**
      * Returns a string representation of an object.
      * @param radix Specifies a radix for converting numeric values to strings. This value is only used for numbers.
      */
    toString(radix?: number): string;

    /**
      * Returns a string representing a number in fixed-point notation.
      * @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
      */
    toFixed(fractionDigits?: number): string;

    /**
      * Returns a string containing a number represented in exponential notation.
      * @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
      */
    toExponential(fractionDigits?: number): string;

    /**
      * Returns a string containing a number represented either in exponential or fixed-point notation with a specified number of digits.
      * @param precision Number of significant digits. Must be in the range 1 - 21, inclusive.
      */
    toPrecision(precision?: number): string;

    /** Returns the primitive value of the specified object. */
    valueOf(): number;
}

您还错过了输入中的type="number"，因此它将您的值转换为string

您的html应该是

<h2>here you can add stuff</h2> 
<div><span>first number: </span><input [(ngModel)]="add.number1" 
placeholder="number1" type="number"></div>
<div><span>second number: </span><input [(ngModel)]="add.number2" 
placeholder="number2" type="number"></div>
<button (click)="Math()">press here to add</button> <label>{{add.total}}</label>
<button (click)="goBack()">go back</button>

关于-可以工作但+不能工作的原因，是因为string类型没有“-”运算符。因此，它将字符串转换为数字。它不会在“ +”上发生

Answer 2

在Add类中，使用类型number（首字母小写）

更新（问题）

在<input>中使用type="number"

工作示例here

说明：

第一个问题-使用Number而不是number时，会出现编译错误。修复后，您会遇到另一个问题-js / angular像字符串一样解释了输入值（并且'10'+'10'给出了字符串连接-但是，如果您键入'10'-'10'，则js implict将字符串转换为数字并进行减法运算）-但是，当您使用type="number"时，js / angular会将输入值隐式转换为数字-这样您将获得正确的结果。

Answer 3

在对您的问题发表评论之后：您的问题是您从输入中获取数字。

输入始终是文本：

function log(input) {
  console.log(input.value + ' is of type ' + typeof input.value);
}

<input type="text" placeholder="input something here" oninput="log(this)">
<br>
<input type="number" placeholder="input something here" oninput="log(this)">

要解决此问题，您需要将输入值转换为数字。

非常容易：只需在其前面附加一个+。

如果有

<input type="number" [(ngModel)]="number1">

那你要做

add() {
  result = +this.number1 + +this.number2;
}

得出正确的加法：

console.log(+'10' + +'10');

编辑：如其他答案所示（但有错误的解释），如果变量输入为type="number"，Angular会将number的输入转换为数字。

然后您可以利用它，的确可以将输入内容和变量输入为数字。但是最好还是先了解基础知识，而不是不了解就使用一些东西！

编辑2 ：要进行减法操作，请遵循相同的逻辑

console.log(+'10' - +'10');

使用angular / ts在component.ts中进行数学运算，但是+无效，但是-

3 个答案: