javascript - 尝试从 Angular 6 中的输入访问值时，Event 和 event.target 的正确类型是什么？

<分区>

我有一个看起来像这样的输入:

<input type="checkbox" value="value" (click)="doSomething($event)">

这工作正常并且函数 doSomething 被正确调用:

doSomething(event) {
    const target = event.target;
    const value = target.value;
    console.log(value);
}

现在我想添加正确的类型和愚蠢的我，我希望它能工作:

doSomething(event: Event) {
    const target: HTMLInputElement = event.target;
    const value: String = target.value;
    console.log(value);
}

我几乎尝试了以下所有组合:

我还尝试了 event.srcElement 而不是 event.target，它与“Element”一起使用但在下一行失败，因为它不是 HTMLInputElement 。

这些是错误信息:

Type 'EventTarget' is not assignable to type 'Element'.

……和……

Type 'Element' is not assignable to type 'HTMLInputElement'.

…和-

Property 'value' does not exist on type 'Element'.

什么是正确的方法？

^{我知道这在没有严格类型的情况下也能正常工作，而且我知道我可以使用 ViewChild。但不知何故，我希望它也能正常工作。}

最佳答案

点击事件的类型是MouseEvent .这包括单击、双击、鼠标向上和向下。

事件的目标类型为EventTarget

目标可以是元素、窗口或文档。您可以尝试通过查看它具有的属性来推断它是哪一个，但如果它是 <input (click)="...">你知道它是一个元素。

您必须将它转换为您想要的类型。

 const target: HTMLInputElement = event.target as HTMLInputElement;

关于javascript - 尝试从 Angular 6 中的输入访问值时，Event 和 event.target 的正确类型是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52345170/

相关文章：

javascript - 调用带参数函数的reactJS render无法编译