我在Angular 2组件代码中使用的是TypeScript Version 2。

我得到错误“属性“值”不存在类型“EventTarget”下面的代码,什么可能是解决方案。谢谢!

e.target.value.match(/\S+/g) || []).length

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'text-editor',
  template: `
    <textarea (keyup)="emitWordCount($event)"></textarea>
  `
})
export class TextEditorComponent {
  @Output() countUpdate = new EventEmitter<number>();

  emitWordCount(e: Event) {
    this.countUpdate.emit(
            (e.target.value.match(/\S+/g) || []).length);
  }
}

当前回答

对于那些在angular 13中遇到这个错误的人,因为是从以前的版本升级的

对我来说,问题是我在我的HTML中使用以下内容(这在以前是允许的)

(keyup)="applyFilter($event.target.value)" 

解决方法是:

HTML:

(keyup)="applyFilter($event)"

组件-在我调用的函数中:

applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    // ... etc...
}

现在我可以像以前一样使用filterValue。

其他回答

以下是我使用的简单方法:

const element = event.currentTarget as HTMLInputElement
const value = element.value

TypeScript编译器显示的错误已经消失,代码可以正常工作。

用户TypeScript内置在实用程序类型Partial< type >中

在模板中

(keyup)="emitWordCount($event.target)"

在你的组件中

 emitWordCount(target: Partial<HTMLTextAreaElement>) {
    this.countUpdate.emit(target.value./*...*/);
  }

这是另一个简单的方法,我用过;

    inputChange(event: KeyboardEvent) {      
    const target = event.target as HTMLTextAreaElement;
    var activeInput = target.id;
    }

就我而言,我有:

const handleOnChange = (e: ChangeEvent) => {
  doSomething(e.target.value);
}

问题是我没有提供一个类型参数给ChangeEvent,这样它就知道e.target是一个HTMLInputElement。即使我手动告诉它target是一个输入元素(例如const target: HTMLInputElement = e.t target), ChangeEvent仍然不知道这是有意义的。

解决办法是:

// add type argument
const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
  doSomething(e.target.value);
}

不要使用其他答案的变通方法,包括转换事件、事件目标或完全禁用类型检查。这不安全。

相反,您应该从HTML元素中“提取”值,并将其作为参数传递。

非常简单的例子:

<input #searchBox type="text" (input)="doSearch(searchBox.value)">
doSearch(text: string): void {
}

所以如果你把它扩展到原来的例子,你应该得到这个:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'text-editor',
  template: `
    <textarea #text (keyup)="emitWordCount(text.value)"></textarea>
  `
})
export class TextEditorComponent {
  @Output() countUpdate = new EventEmitter<number>();

  emitWordCount(text: string) {
    this.countUpdate.emit(
      (text.match(/\S+/g) || []).length);
  }
}