角度2のFirebaseストレージ - アップロード完了時の画像プレビュー

Question

uploadTaskが成功した後に、アップロードされたimgを表示しようとしていますが、非同期の読み込みのために、アップロードが完了する前に表示されます。

upload(value){ 
    let file = value.target.files[0]; 
    let storageRef = firebase.storage().ref('noticias/' + file.name); 
    let uploadTask = storageRef.put(file); 

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
     function(snapshot) { 
     let progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
     console.log('Upload is ' + progress + '% done'); 
     switch (snapshot.state) { 
      case firebase.storage.TaskState.PAUSED: // or 'paused' 
      console.log('Upload is paused'); 
      break; 
      case firebase.storage.TaskState.RUNNING: // or 'running' 
      console.log('Upload is running'); 
      break; 
     } 
     }, function(error) { 
     switch (error) { 
     case 'storage/unauthorized': 
      break; 

     case 'storage/canceled': 
      break; 

     case 'storage/unknown': 
      break; 
     } 
    }, function() { 
     // Upload completed successfully, now we can get the download URL 
     let downloadURL = uploadTask.snapshot.downloadURL; 
     console.log('Upload done!'); 
    }); 

    storageRef.getDownloadURL().then(url => this.imgUrl = url); 
    this.uploadedImg = true; 
    } 

そして、これが図である：

これはメソッドである

<img *ngIf="uploadedImg" [src]="imgUrl" /> 

方法の最後の2行は早すぎるの道をロードするものです。私はまた、成功関数内でそれらを移動しようとしました。問題は、私がそこに移動した場合、thisはクラスを参照しなくなり、ビューの値を変更できないということです。

Answer 1

thisへの参照を紛失することは、javascriptの一般的な問題であり、それを追跡する簡単なパターンがあります。

upload(value){ 
    let that = this; 
    let file = value.target.files[0]; 

今すぐthatは常に元thisを指すようになりますし、次は期待通りに動作します：あなたは、まだ始まったばかりで、これを成功関数内の行の移動に関する権利んだ

}, function() { 
    // Upload completed successfully, now we can get the download URL 
    let downloadURL = uploadTask.snapshot.downloadURL; 
    console.log('Upload done!'); 
    // Using original `this` 
    storageRef.getDownloadURL().then(url => that.imgUrl = url); 
    that.uploadedImg = true; 
});