angular - 使用 Angular 形式执行计算

Question

我有一个 Angular 表单，其中所有输入都是数字，我想一起添加和减去某些字段，并在单独的表单字段中输出值。我设法让字段进行计算，但是它们要求值以逗号分隔每千。以及数字的货币前缀。

示例:100,000,000 美元

但是，这会将字段更改为 NaN，因此我的计算函数失败。

任何帮助，将不胜感激。

还有用于这些计算的多个模板，其中多个模板最简单。我会为每个计算模板创建一个单独的组件，还是可以为每个模板定义一个类并导入它？

这是我当前的一些代码:

模板

<h2>Income Statement</h2>
<div class="col-md-12">
  <div fxLayout="row">
  <div class="container col-md-6">
    <div fxLayout="column">
    <h3>New Values</h3>
    <mat-chip-list>
    <mat-chip>2019/11/14</mat-chip>
  </mat-chip-list>
    <form style="padding-right: 10px;">
      <div class="form-group">
        <label for="fundGrossAsset">Revenue</label>
        <input [ngModel]="revenue" ui-money-mask (ngModelChange)="testPrice=$event" type="text" class="form-control" id="revenue" name="revenue" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">- Cost Of Sales</label>
        <input [ngModel]="costOfSales" (ngModelChange)="testPrice=$event" type="text" class="form-control" id="costOfSales" name="costOfSales" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset"><strong>= Gross Profit</strong></label>
        <input style="border-color:green;" [ngModel]="grossProfits" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="number" class="form-control" id="grossProfit" name="grossProfits" (click)="getGrossProfit()" required placeholder="0" readonly>
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">- Operating Expense</label>
        <input [ngModel]="operatingExpenses" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="operatingExpense" name="operatingExpenses" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">+ Operating Income</label>
        <input [ngModel]="operatingIncome" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="operatingIcome" name="operatingIncome" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset"><strong>= EBITDA</strong></label>
        <input [ngModel]="ebitda" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="ebitda" name="ebitda" (click)="getEBITDA()" required placeholder="0" readonly>
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">- Depreciation/Amortisation</label>
        <input [ngModel]="depreciation" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="depreciation" name="depreciation" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset"><strong>= EBIT</strong></label>
        <input [ngModel]="ebit" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="ebit" name="ebit" (click)="getEBIT()" required readonly placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">+ Income Interest</label>
        <input [ngModel]="incomeInterest" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="incomeInterest" name="incomeInterest" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">- Interest Expense</label>
        <input [ngModel]="interestExpense" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="interestExpense" name="interestExpense" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">+ Extraordinary Items</label>
        <input [ngModel]="extraordinaryItems" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="extraordinaryItems" name="extraordinaryItems" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">+ Other Income</label>
        <input [ngModel]="otherIncome" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="otherIncome" name="otherIncome" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset"><strong>= Net Profit before tax</strong></label>
        <input [ngModel]="netProfitBeforeTax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="netProfitBeforeTax" name="netProfitBeforeTax" (click)="getNetBeforeTax()" required placeholder="0" readonly>
      </div>
      <div class="form-group">
        <label for="fundGrossAsset">- Tax</label>
        <input [ngModel]="tax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="tax" name="tax" required placeholder="0">
      </div>
      <div class="form-group">
        <label for="fundGrossAsset"><strong>= Net Profit After Tax</strong></label>
        <input [ngModel]="netProfitAfterTax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="netProfitAfterTax" name="netProfitAfterTax" (click)="getNetAfterTax()" required placeholder="0" readonly>
      </div>

    </form>
  </div>
  </div>

成分

    templateForm: FormGroup;
      templateFormSub: Subscription;
      calculations: FormArray;

      totalDebt = 0.00;
      fundGrossAsset = 0.00;
      submitted = false;

      result: number;
      resultheading: any;

      revenue: number;
      costOfSales: number;
      grossProfits: number;
      operatingExpenses: number;
      operatingIncome: number;
      ebitda: number;
      depreciation: number;
      ebit: number;
      incomeInterest: number;
      interestExpense: number;
      extraordinaryItems: number;
      otherIncome: number;
      netProfitBeforeTax: number;
      tax: number;
      netProfitAfterTax: number;
       constructor(private _formBuilder: FormBuilder, private router: Router) {}

    onSubmit() { this.submitted = true; }

      getGrossProfit(revenue, costOfSales, grossProfits) {

        grossProfits = +this.revenue - +this.costOfSales;
      }

      getEBITDA(grossProfits, operatingExpenses, operatingIncome) {
        this.ebitda = this.grossProfits - this.operatingExpenses + this.operatingIncome;
      }

      getEBIT(ebitda, depreciation, ebit) {
        this.ebit = this.ebitda - this.depreciation;
      }

      getNetBeforeTax(ebit, incomeInterest, interestExpense, extraordinaryItems, otherIncome) {
        this.netProfitBeforeTax = this.ebit + this.incomeInterest - this.interestExpense + this.extraordinaryItems + this.otherIncome;
      }

      getNetAfterTax(netProfitBeforeTax, tax) {
        this.netProfitAfterTax = this.netProfitBeforeTax - this.tax;
      }

      getResult() {
        this.result = this.netProfitAfterTax;
      }

Answer 1

转换器方法？使用基于文本的输入，但是当您计算这些值时，将这些值转换回数字，并在计算完成后转换回字符串。请参见我的示例:here .

  convertToNumber(value: string): number {
    return parseFloat(value.replace(/,/g, ''));
  }

  convertToString(value: number): string {
    if (value.toString().indexOf(".") > -1) {
      const decimal = value.toString().split(".")[1];
      return (
        this.convertToStringUtil(value.toString().split(".")[0]) + "." + decimal
      );
    } else {
      return this.convertToStringUtil(value.toString());
    }
  }

  convertToStringUtil(value: string): string {
    return value
      .split("")
      .reverse()
      .reduce((accum, value, index, { length }) => {
        return (
          accum +
          value +
          ((index + 1) % 3 === 0 && index !== length - 1 ? "," : "")
        );
      }, "")
      .split("")
      .reverse()
      .join("");
  }