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

我有一种情况，我必须生成带有动态字段的动态计算器。比如，如果我必须生成“百分比计算器”，那么计算器字段是特定的，如果我必须生成“复利”计算器，那么计算器的输入字段肯定是不同的。两个计算器的公式也不同。所以我成功地生成了动态计算器

我有两个组件。一个是

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

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

这是我的

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

} 

通过这种方法，我成功地创建了动态计算器，生成了动态变量，然后分配给输入字段，并从提交的点击事件中获取值。 这是我的完整工作代码

现在我在寻找如何实现公式，当用户在输入字段中输入值时，它将计算结果并在结果输入字段中实时显示，就像角度双向绑定一样。我将在

inputs

array的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'}
  ]
}

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，这是一个很好的问题，以下两个对您的应用程序的更改将得到您想要的：

请注意：

• 计算器可以有n个字段
< Li >假设操作符将是乘法运算（有任何其他操作符，只需在函数<代码> UpDeDeReSurt < /代码>中改变循环内的数学运算符，使其完全动态，考虑将操作符也作为用户输入）

• dynamicFormJson

  中的最后一项将始终用于存储计算结果（这就是为什么我们从0循环-this.formJson.inputs.length-1）

在calculator.component.ts中添加了updateResult（），完整代码：

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

}

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

---

很好的问题，以下两个对您的应用程序的更改将得到您想要的：

请注意：

• 计算器可以有n个字段
< Li >假设操作符将是乘法运算（有任何其他操作符，只需在函数<代码> UpDeDeReSurt < /代码>中改变循环内的数学运算符，使其完全动态，考虑将操作符也作为用户输入）

• dynamicFormJson

  中的最后一项将始终用于存储计算结果（这就是为什么我们从0循环-this.formJson.inputs.length-1）

在calculator.component.ts中添加了updateResult（），完整代码：

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

}

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

---

它不能正常工作。我希望当用户在结果输入字段之前的最后一个输入字段中输入值时，结果应该像角度双向绑定一样实时显示在结果字段中。你的stackblitz链接不起作用。我没有粘贴新的stackblitz。。。使用stackblitz并使用我的帖子中的代码更新TS和HTML文件…但这里的问题是，计算器将动态生成，因此我如何在动态创建的第二个最后输入字段（结果字段之前的输入字段）上分配更改事件。此外，输入没有更改方法。输入ngModel值更改有一个ngModelChange事件。等等-让我做一个新的stackblitz，希望它能澄清它工作不正常。我希望当用户在结果输入字段之前的最后一个输入字段中输入值时，结果应该像角度双向绑定一样实时显示在结果字段中。你的stackblitz链接不起作用。我没有粘贴新的stackblitz。。。使用stackblitz并使用我的帖子中的代码更新TS和HTML文件…但这里的问题是，计算器将动态生成，因此我如何在动态创建的第二个最后输入字段（结果字段之前的输入字段）上分配更改事件。此外，输入没有更改方法。输入ngModel值更改有一个ngModelChange事件。等等-让我做一个新的stackblitz，希望能把它弄清楚