Búsqueda de sitios web

html - Obtener una cadena en lugar del número esperado desde la plantilla de Angular y el valor del elemento nativo de entrada

Tengo un evento que se dispara al soltar la tecla así.

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

Por alguna razón, el valor almacenado es una cadena y no un número. He intentado usar una sintaxis como esta sin éxito.

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

En lugar de eso, tuve que usar el truco de JS del pasado, es decir, el operador unario más así.

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

¿Existe un enfoque más adecuado para asegurarse de que mi entrada proporcione un número? ¿O ya lo estoy haciendo más o menos bien?

El marcado probablemente no proporciona información útil, pero por si acaso, aquí está.

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

Respuesta #1

Está escrito en la especificación que value siempre se almacenará como cadena. Así que incluso si estableces el tipo de entrada como número, solo actualiza la interfaz de usuario. Pero el valor sigue siendo el mismo en tipo cadena.

No extraigo los datos de la misma manera contigo. No estoy seguro de si tienes alguna razón para hacerlo. Siempre uso la directiva ngModel.

Básicamente es la vinculación bidireccional, si actualizas el modelo de datos, actualizará la interfaz de usuario y viceversa. Así que no tienes que obtener el valor manualmente a través de ElementRef como lo hiciste en la pregunta. Se hace automáticamente por ti.

app.component.html

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

app.component.ts

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

Tomé nota del type="number" en el código HTML. Cuando lo estableces así, el inputVal se devolverá como un número. No revisé realmente el código fuente, pero probablemente Angular lo analizará automáticamente de alguna manera.

Si no lo pones, el valor seguirá manteniéndose como un string.

Preparo el ejemplo para ello. Por favor, consulta https://stackblitz.com/edit/angular-ngmodel-number

Puedes simplemente escribir en la entrada y ver el valor y el tipo.

Artículos relacionados