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

Posted 2023-03-13

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

【英文标题】：How can i bind dynamic formula result in result input field based on dynamic calculator using Angular6?

【发布时间】：2019-07-12 08:35:59

【问题描述】：

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

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

【参考方案1】：

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

几点说明：

计算器可以有

n

个字段 我假设运算符将是乘法'（要使用任何其他运算符，只需更改函数 updateResult 中循环内的数学运算符 - 使其完全动态，考虑将运算符作为用户输入也） 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);
  

在calculator.component.html中添加了(change)="updateResult()"，完整代码：

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

【讨论】：

它无法正常工作。我希望当用户在结果输入字段之前的最后一个输入字段中输入值时，结果应该实时显示在结果字段中，就像角度 2 方式绑定一样。您的 stackblitz 链接无效。

我没有粘贴新的 stackblitz...使用您的 stackblitz 并使用我帖子中的代码更新 TS 和 HTML 文件...

但这里的问题是计算器将动态生成，所以我如何在动态创建的倒数第二个输入字段（结果字段之前的输入字段）上分配更改事件

另外输入没有变化方法。有用于输入 ngModel 值更改的 ngModelChange 事件。

等等 - 让我做一个新的堆栈闪电战，希望能把它弄清楚