如何在Angular2中进行计算？

Question

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

我的问题是这个吗？

1. 在这里，从数据库中填充orginal 和Open 汽车。支付是输入字段。
2. 当用户输入付款金额时。支付金额和未结算余额应用余额应显示在余额到期栏中的原始金额加减。 这个计算应该在提交操作之前执行，我不知道怎么做

​

<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

您可以使用类型记录类属性；

 <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

请看演示，并作出相应的修改。

请确认，您希望从原始金额中减去金额，或者从金额中减去原始金额。

这里的演示

希望这能帮到你。