Я пытаюсь воспроизвести видео динамически, когда пользователь нажимает на элемент списка с angular2

Question

Я читаю список видео и, когда пользователь нажимает на видео, я хочу воспроизвести это видео в своем браузере. Я использую 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> 

проходит идентификатор правильно, то это мой метод playvideo

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; 
    */ 

} 

Я устанавливаю источник на моем переменном. он показывает, что в моем доме src установлен правильно, но он не воспроизводится. однако, если я ввожу html с помощью javascript, это прекрасно работает ... кто-нибудь знает, почему это не работает? Также в части описания, когда я нажимаю видео, он продолжает добавлять описание. вместо замены того, что есть.

это должен просто сказать игрушечный самолет, как описание, но каждый раз, когда я нажимаю он добавляет еще одну игрушки самолета.

Answer 1

так что моя проблема с этим было в моей HTML стороне вместо использования HTML выше и пытается связать с исходным HTML элементом. Использование Угловая 2 связывании я должен просто использовал этот HTML код и он работает

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