Entonces, el siguiente código está en Angular 4 y no puedo entender por qué no funciona como se esperaba.
Aquí hay un fragmento de mi controlador:
onUpdatingServerName(event: Event) { console.log(event); this.newserverName = event.target.value; //this wont work }
elemento HTML:
<input type="text" class="form-control" (input)="onUpdatingServerName($event)">
El código me da el error:
La propiedad 'valor' no existe en el tipo 'EventTarget'.
Pero como se puede ver en console.log
, ese valor existe en event.target
.
event.target
aquí es un HTMLElement
que es el padre de todos los elementos HTML, pero no se garantiza que tenga el value
de la propiedad. TypeScript detecta esto y arroja el error. Transmita event.target
al elemento HTML apropiado para asegurarse de que sea HTMLInputElement
que tenga una propiedad de value
:
(<HTMLInputElement>event.target).value
Según la documentación :
Escriba el
$event
El ejemplo anterior convierte el
$event
comoany
tipo. Eso simplifica el código a un costo. No hay información de tipo que pueda revelar las propiedades del objeto de evento y evitar errores tontos.[...]
El
$event
ahora es unKeyboardEvent
específico. No todos los elementos tienen una propiedad devalue
, por lo que conviertetarget
en un elemento de entrada.
(Énfasis mío)
Pasar HTMLInputElement como genérico al tipo de evento también debería funcionar:
onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) { console.log(event); this.newserverName = event.target.value; }
Aquí hay otra solución que funciona para mí:
(event.target as HTMLInputElement).value
Eso debería eliminar el error al informar a TS que event.target
es un HTMLInputElement
, que inherentemente tiene un value
. Antes de especificar, es probable que TS solo supiera que el event
solo era un HTMLInputElement
, por lo tanto, según TS, el target
ingresado era un valor asignado aleatoriamente que podría ser cualquier cosa.