我在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);
}
}
不要使用其他答案的变通方法,包括转换事件、事件目标或完全禁用类型检查。这不安全。
相反,您应该从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);
}
}
你需要显式地告诉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知道元素是一个文本区域,它将知道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);
}
对于那些在angular 13中遇到这个错误的人,因为是从以前的版本升级的
对我来说,问题是我在我的HTML中使用以下内容(这在以前是允许的)
(keyup)="applyFilter($event.target.value)"
解决方法是:
HTML:
(keyup)="applyFilter($event)"
组件-在我调用的函数中:
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
// ... etc...
}
现在我可以像以前一样使用filterValue。