属性“value”在 TypeScript 中的 EventTarget 类型上不存在

javascript typescript angular

2022-08-30 00:34:51

所以下面的代码在Angular 4中，我无法弄清楚为什么它没有按预期的方式工作。

以下是我的处理程序的一个片段：

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

HTML 元素：

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

代码给了我一个错误：

属性“value”在类型“EventTarget”上不存在。

但是可以看出，该值确实存在于 .console.logevent.target

答案 1

event.target这里是一个，它是所有HTML元素的父级，但不能保证具有属性。TypeScript 检测到这一点并引发错误。强制转换为相应的 HTML 元素，以确保它确实具有属性：HTMLElementvalueevent.targetHTMLInputElementvalue

(event.target as HTMLInputElement).value

根据文档：

键入$event

上面的示例将转换为类型。这简化了代码，但代价是高昂的。没有类型信息可以揭示事件对象的属性并防止愚蠢的错误。$eventany

[...]

现在是一个特定的.并非所有元素都具有 value 属性，因此它会将 target 强制转换为输入元素。$eventKeyboardEvent

（强调我的）

答案 2

将 HTMLInputElement 作为泛型传递给事件类型也应该有效：

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}

属性“value”在 TypeScript 中的 EventTarget 类型上不存在

键入$event

键入`$event`