如何在Angular2中进行计算？

Question

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

我的问题是什么？

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

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

   这个计算应该在提交操作之前执行。我不知道该怎么做
   

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>

Component.ts

import { Component } from '@angular/core';
import { ValidateForm } from './validate';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { PaymentsService } from "../payments.service";    
import { HttpClient } from '@angular/common/http';
import { NgForm } from '@angular/forms';
import { ToasterConfig, ToasterService } from 'angular2-toaster';
import { NotificationService } from '../../services/notification.service';
import 'style-loader!angular2-toaster/toaster.css';
@Component({
  selector: 'ngx-popovers',
  styleUrls: ['./new-payments.component.scss'],
  templateUrl: './new-payments.component.html',
})
export class NewPaymentComponent {
  total: any;
  toastConfig: ToasterConfig;
  today: number = Date.now();

  payservice: PaymentsService

  register = true;
  selectedFile = null;
  constructor(private route: ActivatedRoute,
    private router: Router,
    private paymentsService: PaymentsService,
    private http: HttpClient,
    private notificationService: NotificationService,
    private toasterService: ToasterService
  ) {      }

  model: ValidateForm[] = [];
 onChangePayment(event) {

    if (event.value === 'addpayment') {
      this.router.navigate(['/pages/payment/payment']);
    }
  }

  onKey(amountInput) {
    this.total = amountInput

  }   

}

Answer 1

这没什么难的，只是在你的方法中你只需要在计算后赋值并将它赋值给这样的变量 -

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

Answer 2

您可以使用 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
}

Answer 3

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

Demo Here

希望这会对你有所帮助。