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

所以下面的代码是在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; 
}

其他回答

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

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

试试下面的代码:

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

这对我有用:-)

您也可以创建自己的界面。

    export interface UserEvent {
      target: HTMLInputElement;
    }

       ...

    onUpdatingServerName(event: UserEvent) {
      .....
    }

添加任意类型的事件

event: any

例子

[element].addEvenListener('mousemove', (event: any) =>{
//CODE//
} )

发生的事情是typescript将“event”(在这种情况下单击)添加为事件类型，由于某种原因它不识别某些属性。将它添加为any类型不再存在此问题，这适用于任何文档。

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

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

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

event: Event & { target: HTMLInputElement }

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

推荐文章