编译失败尝试使用角度添加两个数字

工作吧

我是 angular 的初学者。我想添加两个数字来计算总数。当我尝试这样做时，我收到错误无法编译。到目前为止我尝试过的内容附在下面。

table.component.html

<form>
         
          <label >Num 1</label>
            <input type="text" class="form-control" id="num1" [(ngModel)]="num1" name="num1"  placeholder="Enter email">
          
      

          <label >Num 2</label>
          <input type="text" class="form-control" id="num2" [(ngModel)]="num2" name="num2"  placeholder="Enter email">
         
    

         <label>{{ parseFloat(num1) + parseFloat(num2)  }}</label>

          <button (click)="myClickFunction" type="button" class="btn btn-danger">Danger</button>
        </form>

table.component.js

export class TableComponent implements OnInit {
  num1 : number = 0;
  num2 : number= 0;

圣保利斯

<form>         
    <label >Num 1</label>
    <input type="text" class="form-control" id="num1" [(ngModel)]="num1" name="num1"  placeholder="Enter email">
    
    <label >Num 2</label>
    <input type="text" class="form-control" id="num2" [(ngModel)]="num2" name="num2"  placeholder="Enter email">
    
    <label>{{ (+num1) + (+num2)  }}</label> // Replace parseFloat with `+`

    <button (click)="myClickFunction()" type="button" class="btn btn-danger">Danger</button> // fill the missing `()`
</form>

您可以在此处查看现场示例。

*PS：在 Angular 12 中，为了避免NaN结果，您还可以执行以下操作：

<label>{{ (+num1 ?? 0) + (+num2 ?? 0) }}</label>

在以前的版本中，您可以这样编写：

<label>{{ (+num1 ? +num1 : 0) + (+num2 ? +num2 : 0) }}</label> *

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。