Angular 角度连接数字，而不是添加

角度型脚本连接数字而不是添加

课程

  title = 'app';

  a: number;
  b: number;

  c: number;

  calc(): void {
    this.c = this.a + this.b;
  }

查看

<input type="text" [(ngModel)]="a" (keyup)="calc()">
<input type="text" [(ngModel)]="b" (keyup)="calc()">

<p>{{c}}</p>

{{c}}

返回

如果

a=1

和

b=2

例如，它等于

c=12

，它应该是

3

，当我尝试

parseInt（this.a）

时，它的结果错误

类型为“number”的参数不能分配给类型为“string”的参数。

像这样尝试

calc(): void {
    this.c = this.a + '' + this.b;
  }

---

问题是，在输入类型中，您必须将类型指定为文本。把它改成数字，它就可以正常工作了

<input type="number" [(ngModel)]="a" (keyup)="calc()">
<input type="number" [(ngModel)]="b" (keyup)="calc()">

<p>{{c}}</p>

---

不能在数字字段上使用parseInt，因为它已经是数字了。（不过编译器这么认为）。 但当您将它绑定到带有文本类型的输入时，它将被转换为字符串。如果只想输入数字，则应使用

<input type='number'>

这就是角度模型绑定的工作原理。

使用“+”转换数字。在角度上，由于缺陷，ngModel中的输入是字符串

this.c=(+this.a)+(+this.b)

注意：您可以直接在.html中使用

{{+a+(+b)}}

---

我认为问题在于，您将属性声明为

number

，那么typescript所说的就有意义了。将类型更改为字符串应该可以解决该问题。使用“+”转换数字：

this.c=（+this.a）+（+this.b）

这是如何发生的？应遵守类型脚本规则（变量类型）并在后台解析为数字。因为当我将类型更改为数字时，模板设计和css选择器也将更改。是的，typescript尊重变量类型。但在运行时，它不再是typescript，而是javascript。如何做到这一点，我们应该遵守typescript规则（变量类型）并在后台解析为数字。因为当我将类型更改为数字模板设计时，css选择器也会更改。

{{+a+(+b)}}