Angular 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" />

該方法的最后兩行是加載時間過早的方法。 我還嘗試將它們移到成功函數中。 問題是，如果我有移動它們， 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;
});