Question

这里我提到了我的html和my 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>

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

希望这会对你有所帮助。

如何在Angular2中进行计算？

3 个答案: