如何使用打字稿添加输入框的值

Question

我想添加apple，orange和mango的值，然后总共求值。下面是我尝试过的代码。

  <div class="row col-12 " ngModelGroup="cntMap">
    <div class="form-group col-6">
        <label for="total">Total</label>
        <div class="clearfix">
          <input type="text" value="{{totalCount}}" class="form-control"
             name="totalCnt" [maxlength]="30" placeholder="Total" #totalCnt="ngModel" ngModel 
             [(ngModel)]="form.totalCnt">
        </div>
     </div>
     <div class="form-group col-6 ml-auto">
      <label for="APPLE">Apple</label>
      <div class="clearfix">
        <input type="text" class="form-control" name="APPLE" [maxlength]="30" placeholder="Enter" 
          #APPLE="ngModel" ngModel [(ngModel)]="form.APPLE" (change)="getCount($event)">
      </div>
     </div>
     <div class="form-group col-6 ml-auto">
      <label for="ORANGE">Orange</label>
      <div class="clearfix">
        <input type="text" class="form-control" name="ORANGE" [maxlength]="30" placeholder="Enter" 
          #ORANGE="ngModel" ngModel [(ngModel)]="form.ORANGE" (change)="getCount($event)">
      </div>
     </div>
     <div class="form-group col-6 ml-auto">
      <label for="MANGO">Mango</label>
      <div class="clearfix">
        <input type="text" class="form-control" name="MANGO" [maxlength]="30" placeholder="Enter" 
          #MANGO="ngModel" ngModel [(ngModel)]="form.MANGO" (change)="getCount($event)">
      </div>
     </div>
  </div>  

在component.ts文件中

  getCount(event: any) {
    var c = event.target.value;
    this.totalCount += parseInt(c);
    console.log("totalCount ", this.totalCount );
  }

问题：

当我在输入中添加值时，其添加计数的方式如下：10 + 10 + 10 = 30

[之后，我将Apple值从10更改为8时，总值如下：10 + 10 + 10 + 8 = 38这意味着在不清除输入框中的数据的情况下，它将添加值8。

有人可以帮我解决这个问题。

Answer 1

[当前发生的流量是正确的，因为getCount()正在将新值添加到现有总计数中。