Как сделать расчет в Angular2?

Question

Здесь я упомянул мой HTML и мой component.ts

У меня такой вопрос?

1. Здесь первоначальная сумма и Открытый баланс , автоматически заполняемые из базы данных. оплата является полем ввода.

2. Когда пользователь вводит сумму платежа. Сумма оплаты и Open остаток должен сложить и вычесть из первоначальной суммы эту сумму баланса должен отображаться в столбце Сальдо.

   Этот расчет следует выполнить перед отправкой действия. Я не знаю, как это сделать
   

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

Вы можете использовать свойства класса машинописи;

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

Пожалуйста, ознакомьтесь с демонстрацией и внесите соответствующие изменения.
Пожалуйста, подтвердите, вы хотите вычесть сумму суммы из исходной суммы или вы хотите вычесть исходную сумму из суммы.

Демо Здесь

Надеюсь, это поможет вам.

Answer 3

В этом нет ничего сложного, просто в вашем методе вам просто нужно присвоить значение после вычисления и присвоить его некоторой переменной, подобной этой -

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