typescript “HTMLElement”类型不存在“play”,“EventTarget”类型不存在属性“value”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/44099955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:34:00  来源:igfitidea点击:

'play' does not exist on type 'HTMLElement' and Property 'value' does not exist on type 'EventTarget'

typescriptjsx

提问by newBike

Not sure why these two warning came from. Any idea to get rid of those warning message from typescript? Thanks

不知道为什么这两个警告来自。有什么想法可以摆脱打字稿中的那些警告信息吗?谢谢

error TS2339: Property 'play' does not exist on type 'HTMLElement'.

错误 TS2339:“HTMLElement”类型上不存在“播放”属性。

    export function playAudio(e, audioId) {
        e.preventDefault()
        let audioPlayer: HTMLElement = document.getElementById(audioId)
        audioPlayer.play();
    }

(248,82): error TS2339: Property 'value' does not exist on type 'EventTarget'.

(248,82): 错误 TS2339: 类型 'EventTarget' 上不存在属性 'value'。

    <input type="checkbox" id="inputSchedule" name="inputCheckboxesSchedule"
           value={this.state.displayMode}
           onClick={e => this.toogleDisplaymode(e.target.value)}/>

回答by Sem

In Angular 5 you need to cast it as follows:

在 Angular 5 中,您需要按如下方式进行转换:

let audioPlayer = <HTMLVideoElement> document.getElementById(audioId);

audioPlayer.play();  

回答by Andrew Eisenberg

The first warning means that there is no play()method on an HTMLElementinstance. This makes sense since play()is presumably a method that you have defined on your own component.

第一个警告意味着实例play()上没有方法HTMLElement。这是有道理的,因为play()大概是您在自己的组件上定义的一种方法。

The second warning means that there is no valueproperty in the EventTargetinstance. For more information about EventTargets, see MDN.

第二个警告意味着实例中没有value属性EventTarget。有关EventTargets 的更多信息,请参阅 MDN

I am not sure how to solve the first problem since you need to grab access to an instance that you have created. But for the second one, you most likely just need to cast the return value. So, you should do something like this:

我不确定如何解决第一个问题,因为您需要获取对已创建实例的访问权限。但是对于第二个,您很可能只需要转换返回值。所以,你应该做这样的事情:

{e => this.toogleDisplaymode((e.target as HTMLInputElement).value)}


EDIT: This might solve your first problem.

编辑:这可能会解决您的第一个问题。

I am not sure, but it might be that you are trying to play a media element and if that's the case, you need to cast the audioPlayer to the right type:

我不确定,但可能是您正在尝试播放媒体元素,如果是这种情况,您需要将 audioPlayer 转换为正确的类型:

let audioPlayer: HTMLMediaElement = document.getElementById(audioId)

See MDN, again, for more information.

再次参见 MDN,了解更多信息。

回答by Amit Bisht

A late post but it will help other users, To solve the first problem you can change type of audioPlayervariable to HtmlVideoElementas below

迟到的帖子,但它会帮助其他用户,要解决第一个问题,您可以将audioPlayer变量类型更改HtmlVideoElement为如下

let audioPlayer: HTMLVideoElement = document.getElementById(audioId);  
audioPlayer.play();  

This will definately resolve the problem

这肯定会解决问题

回答by qwerty

In angular 7 works this code:

在 angular 7 中使用此代码:

let audioPlayer = <HTMLVideoElement>document.getElementById('video');
audioPlayer.muted = true;