计算输入值

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，我想要立即在屏幕上显示输出。我的代码面临的问题是：

1. 输入被追加到 100 它没有做任何加法或减法
2. 我没有立即得到输出。如果我单击输入字段外的某个位置，我就能够显示输出。

如何解决以上两个问题？

HTML

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

打字稿

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

输入元素以字符串而不是数字的形式返回值。

您需要将event.target.value 转换为数字，然后才能将两者相加。 您可以使用简写+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 的变化。