angular - 如何从 Mat 表单字段计算数学方程，该字段使用 Angular 材料像等号的 excel 一样公式化

Question

我是 Angular 的新手。我想在 mat 表单字段中输入 =100+5 或 =8*5/2 ，当我按下回车键时，它会计算并在 mat 表单字段本身内显示结果。我不确定如何在 MatFormField 中处理这些方程。请帮忙

提前致谢！

Answer 1

正如@MoxxiManagarm 所说， MatFormField 只是包装输入的东西，然后可以是文本，文本区域，选择......，所以在你的情况下，你正在谈论输入。因此，您可以轻松地将解决方案包含在您的 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"
  }
}

这是一个堆栈闪电战

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