Javascript Angular 2 Firebase存储-上传完成时的图像预览

我试图在上传任务成功后显示上传的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" />

---

方法的最后两行是加载太早的行。我还尝试将它们移动到success函数中。问题是，如果我将它们移动到那里，

这个

不再引用类，我无法更改视图中的值。

失去对

这个

的引用是javascript中常见的问题，有一个简单的模式来跟踪它。在success函数中移动行是正确的，只需在开始时执行以下操作：

上传（值）{
让那=这；
让file=value.target.files[0]；

现在，

该

将始终指向原始的

此

，以下操作将按预期工作：

}，函数（）{
//上传成功，现在我们可以获得下载URL
让downloadURL=uploadTask.snapshot.downloadURL；
log（'Upload done！'）；
//使用原版“this”`
storageRef.getDownloadURL（）。然后（url=>that.imgUrl=url）；
that.uploadedImg=true；
});

最糟糕的是，我已经知道了这种模式。我刚从学习JS跳起来，太早了。。。谢谢