最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - "$event.target.value" throws error in app.component.html file. in Angular - Stack Overflow

programmeradmin8浏览0评论

I just encountered with an error in my Angular app. So here it goes.

In my "appponent.html" file, I have following code.

<input (keyup)="handleEvent($event.target.value)" />

And In my "appponent.ts", I have following code.

export class AppComponent {
  title = 'blog';
  handleEvent(event: any) { // without type info
  console.log(event);
  console.log(event.target.value);
}

My problem is that, when I try to access the input value in "appponent.html" with "$event.target.value", I get the following error.

**[0mProperty 'value' does not exist on type 'EventTarget'.**

On the other hand, when I only pass "$event" as parameter to my "handleEvent" function, then I can successfully access my input value. You can see my "appponent.ts" file.

Why it is happening? Is there any blocks that we cannot access "event" properties in "appponent.html"?

Kindly ignore any immature mistake. Thanks in advance.

I just encountered with an error in my Angular app. So here it goes.

In my "app.component.html" file, I have following code.

<input (keyup)="handleEvent($event.target.value)" />

And In my "app.component.ts", I have following code.

export class AppComponent {
  title = 'blog';
  handleEvent(event: any) { // without type info
  console.log(event);
  console.log(event.target.value);
}

My problem is that, when I try to access the input value in "app.component.html" with "$event.target.value", I get the following error.

**[0mProperty 'value' does not exist on type 'EventTarget'.**

On the other hand, when I only pass "$event" as parameter to my "handleEvent" function, then I can successfully access my input value. You can see my "app.component.ts" file.

Why it is happening? Is there any blocks that we cannot access "event" properties in "app.component.html"?

Kindly ignore any immature mistake. Thanks in advance.

Share Improve this question edited May 20, 2021 at 16:34 R. Richards 25.2k10 gold badges66 silver badges65 bronze badges asked May 20, 2021 at 16:34 himanshuhimanshu 1251 silver badge9 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 19

Use the $any() type-cast function in certain contexts to opt out of type-checking for a part of the expression

<input (keyup)="handleEvent($any($event).target.value)" />

Reference

发布评论

评论列表(0)

  1. 暂无评论