如何使用Angular6将动态公式结果绑定到基于动态计算器的结果输入字段中？

Question

我有一种情况，我必须生成具有动态字段的动态计算器。 就像如果我必须生成“百分比计算器”以使计算器字段是特定的，并且如果我必须生成“复合利息”计算器以使计算器的输入字段绝对不同。 两个计算器也将具有不同的公式。 因此，我已经成功生成了动态计算器。

我有2个组成部分。 一个是HomeComponent ，另一个是CalculatorComponent 。 我在HomeComponent调用CalculatorComponent 。 我像这样从home.component.ts传递JSON

this.dynamicFormJson = {
  heading : 'Percentage Calculator',
  totalFields : 3,
  inputs : [
    {label : 'Percent', placeholder : 'Enter Percentage Here', type : 'number', variable : 'percent'},
    {label : 'Amount', placeholder : 'Enter Amount Here', type : 'number', variable : 'amount'},
    {label : 'Result', placeholder : '', type : 'number', variable : 'res'}
  ]
}

这是我的calculator.component.ts代码，其中在其中为每个输入字段创建动态变量并将该动态变量绑定到动态创建的输入字段

import { Component, OnInit , Input} from '@angular/core';

@Component({
 selector: 'app-calculator',
 templateUrl: './calculator.component.html',
 styleUrls: ['./calculator.component.css']
 })
export class CalculatorComponent implements OnInit {

 @Input() formJson : any;
 formInputsVar = {};
 constructor() { }

 ngOnInit() {
 this.formJson.inputs.map((item : any)=>{
  if (!this.formInputsVar[item.variable]) {
    this.formInputsVar[item.variable] = '';
  }
 })
}
 onSubmit(){
  console.log(this.formInputsVar);
 }

} 

通过这种方法，我成功创建了动态计算器并生成了动态变量，然后将其分配给输入字段并从onSubmit click事件获取值。 这是我在StackBlitz上完整的工作代码

现在，我正在寻找一种如何实现公式的方法，即当用户在输入字段中输入值时，它将像Angular 2方式绑定一样计算结果并实时显示在结果输入字段中。 我将在inputs数组的json对象中添加公式，但我坚持这样一个事实，即我如何在输入字段上动态实现公式，因为每个计算器将具有不同的JSON和不同的公式。

这是参考网站

如果我在像这样的计算器的同一个json中有公式

this.dynamicFormJson = {
  heading : 'Percentage Calculator',
  totalFields : 3,
  inputs : [
    {label : 'Percent', placeholder : 'Enter Percentage Here', type : 'number', variable : 'percent'},
    {label : 'Amount', placeholder : 'Enter Amount Here', type : 'number', variable : 'amount'},
    {label : 'Result', placeholder : '', type : 'number', variable : 'res'}
  ],
formula : "percent * amount / 100"
}

因此，如何在动态创建的计算器上实现此公式。

注意每个计算器的计算器json都不同，每个计算器的公式也不同。

您可以在参考网站上看到计算器功能。 我要完全一样。 您也可以检查其他计算器。 我正在使用Angular6

Answer 1

很好的问题，对堆栈闪击的以下两项更改将获得您所需要的：

一些注意事项：

• 计算器可以有n个字段
• 我假设运算符将是乘法”（ 要使用其他运算符，只需在函数updateResult的循环内更改数学运算符-要使其完全动态，请考虑将运算符也作为用户输入 ）
• dynamicFormJson的最后一项将始终用于存储计算结果（ 这就是为什么我们从0开始循环-this.formJson.inputs.length-1 ）

新增 updateResult（）在calculator.component.ts，完整的代码：

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  @Input() formJson : any;
  formInputsVar = {};
  constructor() { }

  ngOnInit() {
    this.formJson.inputs.map((item : any)=>{
      if (!this.formInputsVar[item.variable]) {
        this.formInputsVar[item.variable] = '';
      }
    })
  }

  updateResult(){
    var tempMultiplicationValue =1;
    for(var i=0; i<this.formJson.inputs.length-1; i++){
      tempMultiplicationValue = tempMultiplicationValue * this.formInputsVar[this.formJson.inputs[i].variable];
    }
    //this.formInputsVar['res'] = this.formInputsVar['percent'] * this.formInputsVar['amount'];
    this.formInputsVar['res'] = tempMultiplicationValue;
  }


  onSubmit(){
    console.log(this.formInputsVar);
  }

}

新增 (change)="updateResult()"中calculator.component.html，完整的代码：

<div class="row">
  <div class="col-md-6">
    <form style="margin:100px 0 0 100px;background-color: lightgrey; padding: 20px;">
      <h2>{{formJson.heading}}</h2>
      <div class="form-group" *ngFor="let inputRow of formJson.inputs">
        <label for="exampleInputEmail1">{{inputRow.label}}</label>
        <input type="{{inputRow.type}}" class="form-control"  [(ngModel)]="formInputsVar[inputRow.variable]" [ngModelOptions]="{standalone: true}" (change)="updateResult()" aria-describedby="emailHelp" placeholder="{{inputRow.placeholder}}">
      </div>
      <button type="submit" class="btn btn-primary" (click)="onSubmit()">Submit</button>
    </form>
  </div>
</div>