所以下面的代码是在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.log中可以看到,该值确实存在于event.target上。


当前回答

你可以显式地将它解析为"HTMLInputElement"然后访问" value "

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

其他回答

试试下面的代码:

  console.log(event['target'].value)

这对我有用:-)

我这样做的方式如下(比类型断言更好):

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

这假设您只对目标属性感兴趣,这是最常见的情况。如果你需要访问事件的其他属性,一个更全面的解决方案包括使用&类型交集操作符:

event: Event & { target: HTMLInputElement }

这是Vue.js版本,但这个概念适用于所有框架。显然,你可以更具体,而不是使用一个通用的htmllinputelement,你可以使用例如HTMLTextAreaElement文本区域。

你应该使用event.target.value prop和onChange处理程序,如果没有,你可以看到:

index.js:1437 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

或者如果你想使用其他处理程序而不是onChange,使用event.currentTarget.value

事件。target在这里是一个HTMLElement,它是所有HTML元素的父元素,但不保证有属性值。TypeScript检测到并抛出错误。事件。目标到适当的HTML元素,以确保它是HTMLInputElement,它有一个value属性:

(event.target as HTMLInputElement).value

根据文档:

输入$event 上面的例子将$event转换为任意类型。这以一定的代价简化了代码。没有类型信息可以揭示事件对象的属性并防止愚蠢的错误。 […] $event现在是一个特定的KeyboardEvent。并非所有元素都具有value属性,因此它将target转换为输入元素。

(强调我的)

你可以显式地将它解析为"HTMLInputElement"然后访问" value "

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