クリックすると画像またはビデオの角4セットソース

Question

ポップアップモードが表示されたときに画像またはビデオ/オーディオソースをバインドしようとしましたが、データがサーバーから送信されていますが、問題は動作していません。 @ViewChildを使用して要素にアクセスしてその値を設定しようとしましたが、 "navtiveElement"というエラーは未定義です。

` 
    // necessary imports 

@ViewChild('audioplayer') public audioplayer; 
    @ViewChild('audioplayersource') public audioplayersource; 
    @ViewChild('videoplayer') public videoplayer; 
    @ViewChild('videoplayersource') public videoplayersource; 

MediaAsset(data : any){ 
    this.DynamicClassName = "modalWidthCustom"; 
    this.ids = data.id; 
    this.DetailsModal.show(); 
    this.SignedUrl(this.ids); 
    } 

SignedUrl(id: number){ 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    headers.append('Authorization', this.AuthenticationToken); 
    // define vieo project url 
    const APIURL = this.ENDPointURL + 'sourceFiles/' + id; 
    this.http.get(APIURL, { headers: headers }).toPromise() 
    .then((response: Response) => { 
     var a = response.json(); 
     let SourceFile = a._links.sourceFile.href; 
     let SignedPURL = SourceFile + '/signedURL'; 
     let FileType = a.sourceFileType; 
     this.http.get(SignedPURL,{headers : headers}).toPromise() 
     .then((response: Response) => { 
      let SignedUrl = response.json(); 

      let FinalURL; 
      if(SignedUrl.status == 'OK'){ 
      FinalURL = SignedUrl.result.url; 

       if(FileType == 'AUDIO'){ 

       this.audioplayersource.nativeElement.setAttribute('src', FinalURL); 
       this.audioplayer.nativeElement.load(); 

       }else if(FileType == 'VIDEO'){ 
       this.videoplayersource.nativeElement.setAttribute('src', FinalURL); 
       this.videoplayer.nativeElement.load(); 

       }else{ 
       this.Dataimgurl = "https://dummyimage.com/600x400/000/fff"; 
       } 

      } 
     }) 
    }).catch(e => { 
     console.log(JSON.stringify(e)); 
    }); 
    } 
    ` 

は、私はそれを設定することができ、変数内の値ではなく、を得る：ここ

は私のhtmlコード `

ここ

<form #ManageForm="ngForm" novalidate id="ManageForm" class="form-horizontal" > 
            <app-modal #DetailsModal [CustomClassName]="DynamicClassName"> 
             <div class="app-modal-header"> 
              <button type="button" class="close" (click)="CloseModal()">&times;</button> 
              {{ DataName }} 
             </div> 
             <div class="app-modal-body"> 
              <div class="container-fluid"> 
               <div class="row"> 
                <div class="col-lg-8"> 
                 <img *ngIf="FileType == 'IMAGE'" src= {{ imgurl }} class="imgpreview" /> 

                 <video class="video-js vjs-default-skin audio_preview" controls preload="auto" width="100%" height="100%" data-setup='{"example_option":true}' #audioplayer *ngIf="FileType == 'AUDIO'"> 
                 <source src="" type="audio/mp3" #audioplayersource/> 
                 <p class="vjs-no-js"> text/message to display <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> 
                 </video> 

                 <video class="video-js vjs-default-skin video_preview" controls preload="auto" width="100%" height="100%" data-setup='{"example_option":true}' #videoplayer *ngIf="FileType == 'VIDEO'"> 
                 <source src="" type="video/mp4" #videoplayersource/> 
                 <p class="vjs-no-js">Some message<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
                 </p> 
                </video> 
                </div> 
               </div> 
              </div> 
             </div> 
            </app-modal> 
           </form> 

`は、コンポーネントファイルでありますモーダルポップアップの後のソース。 src値を設定する方法を教えてください。

Answer 1

私はそれを理解しました。 は、私は変数にSourcelinkを保存してから、この

<source [src]="Sourcelink" type="audio/mp3" #audioplayersource/> 

のようなソースにその変数を渡され、その後、私は答えのために、この

ngViewAfterInit() { 
    if(FileType == 'AUDIO'){ 
     this.audioplayer.nativeElement.load(); 
    } 
    if(FileType == 'VIDEO'){ 
    this.videoplayer.nativeElement.load(); 
    } 
} 

Answer 2

あなたは角を持つ外部URLを使用している場合は、使用してください：

yourSrcBindVariable = this.sanitizer.bypassSecurityTrustResourceUrl('http://foo'); 

代わりAngular documentation

またはthis related question中の角DomSanitizer上

yourSrcBindVariable = 'http://foo'; 

詳細情報を。