输入值的计算

Question

我正在开发一个 angular 应用程序，其中有一个 matInput 字段，如下面的代码所示

https://stackblitz.com/edit/ngx-slider-simple-slider-example-dbyxqm?file=src%2Fapp%2Fapp.component.html

用户可以输入正值或负值。假设我的当前值为 100 并且用户输入 +5 或 5（用户可以使用 + 符号或可以给出正数）我希望我的最终输出为 100 如果用户输入 -5 那么我希望我的最终输出应该是 95 并且我想要立即在屏幕上显示输出。我的代码面临的问题是：

输入被追加到 100 它没有做任何加法或减法
我没有得到即时输出。如果我单击输入字段外的某处，我能够显示输出。

如何解决以上两个问题？

HTML

<input matInput (change)="valueUpdated($event)">
my final value is {{myFinalValue}}

TypeScript

import { Component } from '@angular/core';
import { Options } from 'ng5-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public myFinalValue: number;

  valueUpdated(event) {
    this.myFinalValue = 100 + event.target.value;
  }
}

Answer 1

输入元素 returns 值作为字符串而不是数字。

您需要先将 event.target.value 转换为数字，然后再将两者相加。您可以使用 shorthand +event.target.value，它将值转换为数字（相当于 parseInt(<var>)）

valueUpdated(event) {
  this.myFinalValue = 100 + +event.target.value;
}

如果您希望 UI 在每次输入更改时更新，您需要使用 (input) 事件而不是 (change) 事件：

<input matInput (input)="valueUpdated($event)">
my final value is {{myFinalValue}}

Here's my fork 你的 stackblitz 有变化。

输入值的计算

Calculation of the input values

html

angular

typescript

angular9

angular10

HTML

TypeScript