"EventTarget"类型中不存在属性"值"

Question

我使用TypeScript版本2作为Angular 2组件代码.

我收到错误"属性'值'在类型'EventTarget'上不存在"下面的代码,可能是解决方案.谢谢!

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

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);
}
}

Answer 1

您需要明确告诉TypeScript您的目标HTMLElement的类型.

这样做的方法是使用泛型类型将其强制转换为正确的类型:

this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

或者(如你所愿)

this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

或(再次,偏好问题)

const target = e.target as HTMLTextAreaElement;

this.countUpdate.emit(target.value./*...*/)

这将让TypeScript知道元素是a textarea并且它将知道value属性.

任何类型的HTML元素都可以这样做,每当你给TypeScript更多关于它们的类型的信息时,它会给你带来适当的提示,当然还有更少的错误.

为了使将来更容易,您可能希望直接使用其目标类型定义事件:

// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
  this.countUpdate.emit(e.target.value);
}

Answer 2

对于那些在 Angular 13 中遇到此错误的人，因为从以前的版本升级

对我来说问题是我在 HTML 中使用了以下内容（之前是允许的）

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

解决这个问题的方法是：

HTML：

(keyup)="applyFilter($event)"

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

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

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

Answer 3

不要使用其他答案中涉及强制转换事件、事件目标或完全禁用类型检查的解决方法。这是不安全的。

相反，您应该从 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);
  }
}

Answer 4

这是我使用的简单方法:

let element = event.currentTarget as HTMLInputElement;
let value = element.value;

TypeScript编译器显示的错误消失了,代码也可以运行.

Answer 5

由于我遇到了两个以稍微不同的方式搜索我的问题的问题，因此我将复制我的答案，以防您最终出现在这里。

在被调用的函数中，您可以使用以下命令定义您的类型：

emitWordCount(event: { target: HTMLInputElement }) {
  this.countUpdate.emit(event.target.value);
}

这假设您只对target属性感兴趣，这是最常见的情况。如果您需要访问 的其他属性event，更全面的解决方案涉及使用&类型交集运算符：

event: Event & { target: HTMLInputElement }

您还可以更具体，而不是使用HTMLInputElement您可以使用例如HTMLTextAreaElement用于 textareas。

Answer 6

角 10+

打开tsconfig.json和禁用strictDomEventTypes.

  "angularCompilerOptions": {
    ....
    ........
    "strictDomEventTypes": false
  }

Answer 7

考虑 $any()

<textarea (keyup)="emitWordCount($any($event))"></textarea>

Answer 8

fromEvent<KeyboardEvent>(document.querySelector('#searcha') as HTMLInputElement , 'keyup')
    .pipe(
      debounceTime(500),
      distinctUntilChanged(),
      map(e  => {
            return e.target['value']; // <-- target does not exist on {}
        })
    ).subscribe(k => console.log(k));

也许像上面这样的东西会有所帮助。根据实际代码更改它。问题是........目标['价值']

Answer 9

这是我使用的另一种简单方法；

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

Answer 10

角度 11+

打开tsconfig.json和禁用strictTemplates.

 "angularCompilerOptions": {
    ....
    ........
    "strictTemplates": false
  }

Answer 11

就我而言，我有：

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

问题是我没有为 ChangeEvent 提供类型参数，因此它知道e.target是HTMLInputElement. 即使我手动告诉它这target是一个输入元素（例如const target: HTMLInputElement = e.target），它ChangeEvent仍然不知道这是有道理的。

解决方案是这样做：

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