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).valueSegún la documentación :
Escriba el
$eventEl ejemplo anterior convierte el
$eventcomoanytipo. 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
$eventahora es unKeyboardEventespecífico. No todos los elementos tienen una propiedad devalue, por lo que conviertetargeten 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.