Угловое хранилище 2-го уровня - предварительный просмотр изображения при загрузке

Question

Я пытаюсь показать загруженный 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; 
});