Question

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

我有2个组成部分。一个是HomeComponent，另一个是CalculatorComponent。我正在CalculatorComponent中呼叫HomeComponent。我是这样从JSON传递home.component.ts的

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获取值。这是我完整的工作代码 StackBlitz

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

这里是reference website

如果我在像这样的计算器的同一个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

一个很好的问题，对您的stackblitz进行以下2处更改将得到您想要的：

一些注意事项：

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

已添加在 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);
  }

}

添加 (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>

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

1 个答案: