如何用Angular2进行计算？

这里我提到了我的html和component.ts

我的问题是

此处原始金额和未结余额自动填充 从数据库中。付款是输入字段

当用户输入付款金额时。支付金额和未结余额 余额应与余额的原始金额相加或相减 应显示在“到期余额”列中

此计算应在提交操作之前执行。我不知道如何执行此操作

Html

<table style="width:100%; text-align: center ">
              <tr>
                <th style="width: 40%">DESCRIPTION</th>
                <th style="width: 15%">DUE DATE</th>
                <th style="width: 15%">ORIGINAL AMOUNT</th>
                <th style="width: 15%">OPEN BALANCE</th>
                <th style="width: 15%">PAYMENT</th>
              </tr>
              <tr>
                <td>
                  <textarea type="text" value="reset" class="form-control" id="description" disabled [(ngModel)]="model.description" style=" border-color: transparent"
                    name="description" #description="ngModel"></textarea>
                </td>
                <td>
                  <input #duedate="ngModel" type="date" class="form-control" disabled [(ngModel)]="billForm.duedate" required name="due_date"
                    id="due_date" style=" border-color: transparent">
                </td>
                <td>
                  <input type="text" #refrence #originalamtInput="ngModel" disabled style=" border-color: transparent" class="form-control"
                    id="original_amount" [(ngModel)]="model.originalamtInput" name="original_amount">
                </td>
                <td>
                  <input type="text" #refrence #openbalance="ngModel" disabled style=" border-color: transparent" class="form-control" id="open_balance"
                    style="border-color:transparent" [(ngModel)]="model.openbalance" name="open_balance">
                </td>
                <td>
                  <input type="text" #refrence #paymentamount="ngModel" (keyup)="onKey(paymentamount.value)" style=" border-color: transparent"
                    style="text-align:right; border-color: transparent" placeholder="₹0.00" class="form-control" id="payment_amount"
                    pattern="[0-9]+" required minlength="0" maxlength="7" [(ngModel)]="model.paymentamount" name="payment_amount">
                </td>
              </tr>
            </table>
          </div>
          <br/>
          <div class="row">
            <div class="col-md-9">
            </div>
            <div class="col-md-3">
              <b style=" text-align:right;padding-left: 10%;">Total&emsp;&emsp;₹ &ensp;{{this.total }}</b>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
            </div>
            <div class="col-md-6">
              <div style="padding-left: 50%;">
                <b>Balance due&emsp;₹ &ensp;&ensp;&ensp; &ensp;</b>
              </div>
            </div>
          </div>

---

这并没有什么困难，只是在您的方法中，您只需要在计算后分配值，并将其分配给这样的变量-

<div style="padding-left: 50%;">
  <b>Balance due&emsp;₹ &ensp;&ensp;&ensp; &ensp; {{balance_due}}</b>
</div>

onKey(amountInput) {
  this.balance_due = (amountInput + this.model.openbalance) - this.model.originalamtInput
}

到期余额&emsp；₹ &ensp&ensp&ensp&ensp；{{余额到期日}
onKey（amountInput）{
this.balance\u due=（amountInput+this.model.openbalance）-this.model.originalamtInput
}

您可以使用typescript类属性

 <td>
 <input type="text" #refrence #paymentamount="ngModel" (keyup)="onKey(paymentamount.value)" style=" border-color: transparent"
                style="text-align:right; border-color: transparent" placeholder="₹0.00" class="form-control" id="payment_amount"
                pattern="[0-9]+" required minlength="0" maxlength="7" [(ngModel)]="model.paymentamount" name="payment_amount">
            </td>

get paymentamount():number{
       return  _paymentamount;
}
set paymentamount(val:number){
     if(val===this._paymentamout) return;
     this._paymentamount=val;
     this.calculate();// Calculation logic go
}

获取paymentamount（）：编号{
返回-支付金额；
}
设置付款金额（val:编号）{
如果（val==此._paymentamout）返回；
此项。_paymentamount=val；
this.calculate（）；//计算逻辑转到
}

请查看演示，并进行相应的更改。
请确认，您想从原始金额中减去总金额，或者您想从总金额中减去原始金额

---

希望这能对您有所帮助。

如果我尝试此操作，它会显示类型validateform上不存在类似openbalance的错误。因此，必须知道该类型的变量名，才能获取值并进行相应的计算

 <td>
 <input type="text" #refrence #paymentamount="ngModel" (keyup)="onKey(paymentamount.value)" style=" border-color: transparent"
                style="text-align:right; border-color: transparent" placeholder="₹0.00" class="form-control" id="payment_amount"
                pattern="[0-9]+" required minlength="0" maxlength="7" [(ngModel)]="model.paymentamount" name="payment_amount">
            </td>

get paymentamount():number{
       return  _paymentamount;
}
set paymentamount(val:number){
     if(val===this._paymentamout) return;
     this._paymentamount=val;
     this.calculate();// Calculation logic go
}