Question

我有一个事件会像这样触发键。

this.value = this.input.nativeElement.value as number;

由于某种原因，存储的值是字符串而不是数字。我尝试使用这种语法无济于事。

this.value = +this.input.nativeElement.value;

相反，我不得不使用过去的JS hack，即像这样的一元加运算符。

<input #input
  value="{{value}}"
  (keyup)="onKeyUp($event)"
  (keydown.Tab)="onKeyUp($event)">

是否有更适当的方法来确保我的输入内容提供数字？还是我已经做好了？

标记可能没有提供有用的信息，但以防万一，在这里。

{{1}}

Answer 1

在spec上写道value将始终存储为字符串。因此，即使将输入类型设置为数字，它也只会更新用户界面。但是字符串类型的值仍然相同。

我不会以与您相同的方式提取数据。不知道您是否有任何理由这样做。我总是使用ngModel指令。

基本上是双向绑定，如果您更新数据模型，它将更新UI，反之亦然。这样您就不必像在问题上那样通过ElementRef手动获取值。它会自动为您完成。

app.component.html

<input type="number" [(ngModel)]="inputVal" (keyup)="onKeyUp($event)">

app.component.ts

onKeyUp(event: KeyboardEvent) {    
  console.log(this.inputVal);
}

在HTML代码上注意了type="number"。像这样设置时，inputVal将作为数字返回。我并没有真正检查过源代码，但是Angular可能会以某种方式自动对其进行解析。

如果不输入，该值仍将保留为字符串。

您只需键入输入即可查看值和类型。