angular2添加两个数字视图侧

Question

我希望能够添加两个文本框中的数字：

obj

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

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; 
}

结果：2

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

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

结果：1​​1

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文件中的数字

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>

Answer 3

只需使用type =＆＃34; number＆＃34;

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

这是Demo

以下是实现此目的的更多方法

1. 通过控制器：

   angular.controller（＆＃39; numCtrl＆＃39;，function（$ scope，$ window）{     $ scope.num = parseInt（num，10）; }）;

2. 自定义过滤器：

    app.filter('num', function() {
   
   return function (input) {
   
     return parseInt(input, 10);
   
   }});
   {{ (num1 | num) + (num2 | num) } }
   

3. <强>表达式：

   //在控制器中声明代码：

   $ scope.parseInt = parseInt;

   然后：

   {{parseInt函数（NUM1）+ parseInt函数（NUM2）}}

4. raina77ow

   {{（num1-0）+（num2-0）}}

Answer 4

这对我有用：

<dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jackson2-provider</artifactId>
            <version>3.0.11.Final</version>
            <scope>provided</scope>
</dependency>

        <!-- https://mvnrepository.com/artifact/org.jboss.resteasy/resteasy-multipart-provider -->
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-multipart-provider</artifactId>
            <version>3.0.11.Final</version>
            <scope>provided</scope>
        </dependency>

Answer 5

添加括号..像这样..

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