Javascript 当用户使用angular2单击列表元素时,我尝试动态播放视频

Javascript 当用户使用angular2单击列表元素时,我尝试动态播放视频,javascript,angular,video,typescript,Javascript,Angular,Video,Typescript,我正在阅读视频列表,当用户单击视频时,我想在他们的浏览器中播放该视频。我正在使用angular2 这是我的html <div> <ul> <li id="videoList" *ngFor="let videoName of videoNames"><a (click)="playVideo(videoName, sopJson)" href="javascript: void(0)">{{videoName}}<

我正在阅读视频列表,当用户单击视频时,我想在他们的浏览器中播放该视频。我正在使用angular2

这是我的html

  <div>
    <ul>
        <li id="videoList" *ngFor="let videoName of videoNames"><a (click)="playVideo(videoName, sopJson)" href="javascript: void(0)">{{videoName}}</a></li>
        </ul>
    </div>
    <div id="videoPlayer" [hidden]="hiddenVideo">
        <video width="800" height="600" controls>
            <source [src]="sopVideoUrl">
            </video>
            <p>{{videoDescriptions}}</p>
    </div>

{{videoDescriptions}}

我正确地传递了id,这是我的播放视频方法

playVideo(id: String, sopJson: String){
 this.hiddenVideo = false; 


this.sopVideoUrl = `http://localhost:8080/${id}`; 


 for(let i = 0; i < sopJson.length; i++){
     let name = sopJson[i]; 
     if(id == name[0].Name){
         if(name[1].Descrption != ""){
           let description = name[1].Descrption;
           this.videoDescriptions.push(description); 
         }

     }
 }


/*
  let sopStrVideo = '<video width="800" height="600" controls>' +
                '<source src="http://localhost:8080/'+id+'">'+
                '</video>'






     document.getElementById('videoPlayer').innerHTML = sopStrVideo; 
     */

}
播放视频(id:String,sopJson:String){ this.hiddenVideo=false; this.sopVideoUrl=`http://localhost:8080/${id}`; for(设i=0;i 我正在设置变量的源。它在我的dom中显示src设置正确,但不播放。但是,如果我使用javascript注入html,效果会很好。。。有人知道为什么这不起作用吗?另外,在描述部分,当我单击视频时,它会不断添加到描述中。而不是替换现有的

这应该只是说玩具飞机作为描述,但每次我点击它添加另一个玩具飞机


因此,我的问题在于我的html端,而不是使用上面的html并尝试与源html元素绑定。使用Angular 2绑定,我应该只使用这段html代码,它可以正常工作

<div id="videoPlayer" [hidden]="hiddenVideo">
           <video width="800" height="600" controls [src]="sopVideoUrl">
                </video>
                <p>{{videoDescriptions}}</p>
        </div>

{{videoDescriptions}}


此.videoDescriptions.push(描述)
是一个数组,因此行为是预期的。声明/更改
videoDescriptions:string
this.videoDescriptions=description
取而代之。duh idk为什么我没听清楚那句话感谢那句话有效为什么这被选为一个糟糕的问题?你帮我解决了一个问题我自己解决了另一个问题我相信有些人在与Angular2合作时可能会遇到同样的问题我希望这里一般都用“你”,而不是指给我看。哈哈,我只是来看看为什么我会被通知。如果社区中有人发现它有用,他们会把它放大。你真的不应该把这次否决票看得太重。。。只是代码!!你说得对,再次感谢你的帮助。