html - 从 Angular 模板获取字符串而不是预期数字并输入 native 元素的值

Question

我有一个像这样在按下键时触发的事件。

value: number;
onKeyUp(event: KeyboardEvent) {
  this.value = this.input.nativeElement.value;
  console.log("typo", typeof (this.value));
}

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

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

取而代之的是，我不得不使用过去的 JS hack，即像这样的一元加号运算符。

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

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

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

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

Answer 1

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

我提取数据的方式与您不同。不确定您是否有任何理由这样做。我总是使用 ngModel指示。

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

app.component.html

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

应用程序组件.ts

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

注意 HTML 代码中的 type="number"。当您这样设置时，inputVal 将作为一个数字 返回。我并没有真正检查源代码，但 Angular 可能会以某种方式自动解析它。

如果您不放置它，该值仍将保留为字符串。

我为它准备了例子。请查看https://stackblitz.com/edit/angular-ngmodel-number

您只需在输入中键入内容并查看值和类型。