计算以点小数分隔符结尾的两个数字

Question

我对Angular有点熟悉，刚开始接触Ionic Framework

我遇到了问题。我正在尝试计算（求和）在单独的输入字段中给出的两个数字，并在下面显示结果。如果我输入以下数字，计算将按预期进行：1 或 1.0 但输入 1。（点后未给出数字）returns 该输入字段为 null。

在模板中我有如下代码：

<b>1st input</b> <ion-input type="number" (ionChange)="calculate()" [(ngModel)]="firstInput"></ion-input>
<b>2nd input</b> <ion-input type="number" (ionChange)="calculate()" [(ngModel)]="secondInput"></ion-input>
<b>Total:</b> {{ total }}

并且在组件中：

firstInput = null;
secondInput = null;
total = null;
...
calculate() {
   this.total = this.firstInput + this.secondInput;
}

为什么 1. 返回 null？是否有将 1. 转换为数字的解决方法？

Answer 1

如果您使用不带 type="number" 的普通输入并在 calculate 函数中使用 Number() 转换值，您将得到正确的结果：

<b>1st input</b> <input  [(ngModel)]="firstInput" />
<b>2nd input</b> <input  [(ngModel)]="secondInput" />
<button (click)="calculate()"></button>
<b>Total:</b> {{ total }}

  firstInput = null;
  secondInput = null;
  total: number | null = null;

  calculate() {
    this.total = Number(this.firstInput) + Number(this.secondInput);
  }

Answer 2

将您必须的 {total} 更改为只说 {input1 + input 2} 并确保它们是数字类型，否则只需将它们转换为 one

{数字(输入1) + 数字(输入2)}

Answer 3

感谢您的回复，抱歉耽误了时间，没能早 post。

但是，我意识到将该字段键入为数字字段会剥夺我实现所需的自由。所以我最终只使用常规 ion-input 而不是将其作为数字输入，而是给它一个十进制的输入模式，这样当输入被聚焦时移动设备会显示数字键盘。

模板：

<b>1st input</b> <ion-input #firstInputRef (ionChange)="handleFirstInput(firstInputRef)" inputmode="decimal" [(ngModel)]="firstInput"></ion-input>
<b>2nd input</b> <ion-input #secondInputRef (ionChange)="handleSecondInput(secondInputRef)" inputmode="decimal" [(ngModel)]="secondInput"></ion-input>
<b>Total:</b> {{ total }}

组件：

@ViewChild('firstInputRef', {static: false, read: ElementRef}) firstInputRef: ElementRef;
@ViewChild('secondInputRef', {static: false, read: ElementRef}) secondInputRef: ElementRef;

readonly twoDotsRegex = /(\..*){2,}/;
...

handleFirstInput(input) {
      // Get the caret position
      const caretPosition = this.firstInputRef.nativeElement.querySelector('input').selectionStart;

      if (this.twoDotsRegex.test(input.value)) {
        // If second dot (.) is given, let's remove the added character
        input.value = input.value.substring(0, caretPosition - 1) + input.value.substring(caretPosition, input.value.length);
      }

      this.firstInput = input.value;
      this.calculate();
}

handleSecondInput(input) {
      // Get the caret position
      const caretPosition = this.secondInputRef.nativeElement.querySelector('input').selectionStart;

      if (this.twoDotsRegex.test(input.value)) {
        // If second dot (.) is given, let's remove the added character
        input.value = input.value.substring(0, caretPosition - 1) + input.value.substring(caretPosition, input.value.length);
      }

      this.secondInput = input.value;
      this.calculate();
}

...和 calculate-method 与原始 post 中的一样。

计算以点小数分隔符结尾的两个数字

Calculating two numbers ending with the dot decimal separator

ionic-framework

angular