在Angular4中的文本框中输入值时，页面变得无响应

Question

我想计算发票中输入的产品税。因此，我正在使用temalate驱动的表格。

下面是小代码

<tr *ngFor="let item of products; let i = index;">

                                <td> 
                                    <input type="number" name="qty{{i}}" [(ngModel)]="item.qty" />
                                </td>
                                <td> 
                                    <input type="number" name="rate{{i}}" [(ngModel)]="item.rate"/>
                                </td> 


                                <td>
                                    <input type="number" name="amount{{i}}"  value="{{ item.qty * item.rate }}" readonly /> 
                                </td>
                            </tr>

并显示另一个div中的小计，总计，净额。代码在

之下

                    <p class="all-t-list">
                        <span>Sub total</span>
                        <strong>Rs {{ getSubTotal() }}</strong>
                    </p>



                    <p class="all-t-list normal-txt">
                        <span>Shipping Charges</span>
                        <input type="number" #shipping_charges 
                        (keyup)="onKeyUpShippingValue(shipping_charges.value)" />
                    </p>

                    <p class="all-t-list normal-txt">
                        <span>Total</span>
                        <strong>Rs {{ totalAmount()}}</strong>
                    </p>

                    <p class="all-t-list">
                        <span>Deposit   </span>
                        <strong><input type="text" #deposit_charges  
                        (keyup)="onKeyUpDepositValue(deposit_charges.value)"/></strong>
                    </p>

                    <p class="all-t-list">
                        <span>Net Total   </span>
                        <strong>Rs {{netTotalAmount()}}</strong>
                    </p>

                    <p class="all-t-list">
                        <span>Balance due   </span>
                        <strong>Rs {{netTotalAmount()}}</strong>
                    </p>

一切都运行正常但是当我输入价值数量和评价文本框时，时间页面变得无法响应。我不知道这段代码有什么问题。下面是在类文件中编写的代码。

 actual_total : number = 0;
 shipping_charges : number = 0;
 deposit_charges : number = 0;


// it will count subtotal_cost
 getSubTotal(){
       console.log("getSubTotal method called");
       let subTotal : number = 0;
        this.products.forEach(function (item :any) {
            subTotal += item.qty * item.rate;
        });
        this.actual_total = subTotal;
        return subTotal;
 }


// it will caalculate discount on actual value      
getDiscount(){
  console.log("total is:"+this.actual_total);
  console.log("Discount is" );

}

// it will give you shipping value
onKeyUpShippingValue(event){
  debugger;
  this.shipping_charges = parseInt(event);
  if (isNaN(this.shipping_charges)){
    this.shipping_charges = 0;
  }
}

//calculate deposit charges
onKeyUpDepositValue(event){
  debugger;
  this.deposit_charges = parseInt(event);
  if (isNaN(this.deposit_charges)){
    this.deposit_charges = 0;
  }
}


//calculate netTotalAmount
netTotalAmount(){
      console.log("netTotalMethod called");
        var nettotal_amount : number = 0.0;
         nettotal_amount = this.actual_total - this.deposit_charges;
        // this.actual_total = nettotal_amount;
        return nettotal_amount; 
}

counter : number= 0;

//calculate balance due amount
balanceDueAmount(){
  console.log("balance due method called");
  var balance_due : number = 0.0;
  balance_due = this.actual_total - this.deposit_charges;
 // this.actual_tota11l = nettotal_amount;
  return balance_due;  
}


// calculate totalAmount
totalAmount(){
        let total : number = 0;
        this.products.forEach(function (item :any) {
            total += item.qty * item.rate;
        });
        total = total+this.shipping_charges;
        this.actual_total = total;
        return total;
   }

函数getSubtotal，totalAmount，balanceAmount调用无限时间因此该页面beocme无响应。那么还有另一种方法可以避免无反应吗???