如何使用角度材料从Mat表单域计算数学方程，该表单域的公式类似于具有相等符号的excel

Question

我是第一次接触Angular。我想在mat表单域中输入=100+5或=8*5/2，当我按回车键时，它会在mat表单域中计算并显示结果。我不确定如何在MatFormField中处理这些等式。请帮帮忙

提前感谢！

Answer 1

正如@MoxxiManagarm所说，MatFormField只是包装输入的东西，然后输入可以是文本、文本区域、select ...，所以在您的例子中，您谈论的是输入。因此，您可以轻松地在MatFormField中包含输入的解决方案。

通过一个简单的(keyup.enter)指令，您可以在用户使用Enter键时将您的输入绑定到方法。

<input type="text" (keyup.enter)="onEnter($event)">

然后，在您的方法上，为了确保您想要像Excel一样执行操作，请检查第一个字符是否为等号。

onEnter(event){
  const value = event.target.value
  if (value[0] == "="){
    event.target.value = eval(value.substring(1)) // Here you get only the operation to evaluate it without the first "equal"
  }
}

Here是一个堆栈闪电战

Answer 2

MatFormField只是一个包装器组件。我猜我们正在谈论的是一个输入。

您可以对输入事件做出反应，并简单地覆盖内容

<input (keydown.enter)="solveEquation($event)" />

  solveEquation($event) {
    const element = $event.target;
    element.value += `=${this.solve(element.value)}`
  }

  private solve(equation: string): number {
    // any logic to solve the string equation
    return 111;
  }