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


当前回答

我建议创建一个实用程序类型:

interface MyEvent<T extends EventTarget> extends Omit<Event, 'target'> {
  target: T;
}

然后像这样使用它:

function onChange({ target: { value } }: MyEvent<HTMLInputElement>) => {
  doSomethingWith(value);
}

其他回答

我建议创建一个实用程序类型:

interface MyEvent<T extends EventTarget> extends Omit<Event, 'target'> {
  target: T;
}

然后像这样使用它:

function onChange({ target: { value } }: MyEvent<HTMLInputElement>) => {
  doSomethingWith(value);
}

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

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

请试试这个

<input type = 'text' [value] = 'value' (input) = 'data = $any($event.target).value'>

React有一些接口,比如ChangeEvent用于onChange, FormEvent用于onSubmit等

我也试着做类似的事情,下面的解决方案对我有用

handleChange (e : React.ChangeEvent<HTMLInputElement>) {
  console.log(e.currentTarget.value);
}


<input 
   autoFocus
   value={this.state.account.username}
   onChange={this.handleChange}
   id="username" 
   type="text" 
   className="form-control" 
/>

试试下面的代码:

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

这对我有用:-)