angular2添加两个数字视图侧

Question

我希望能够从两个文本框中添加数字:

template: `
    <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
    <p>The sum is: {{ num1 + num2 }}</p> `

即使我将两个变量都定义为数字:

export class AppComponent {
    num1 : number;
    num2 : number; 
}

因此,如果我执行此操作,结果就可以了

 <p>The sum is: {{ 1 + 1 }}</p> 

结果:2

但如果我使用变量,它会预先形成一个concat,结果将是11.

 <p>The sum is: {{ num1 + num2 }}</p>

结果:11

Answer 1

你可以试试这个,

One way

 <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
 <p>{{ num1*1   +num2*1 }}</p>

DEMO

2ND way

创建一个函数,将String转换为ts文件中的Number

ConvertToInt(val){
  return parseInt(val);
}

然后打电话给它

  <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
   <p>{{ ConvertToInt(num1)   + ConvertToInt(num2) }}</p>

DEMO

Answer 2

来自 HTML 输入的模型始终采用字符串格式。您可以使用此解决方法：

<p>The sum is: {{ (num1-0) + (num2-0) }}</p>