Angular 2 Firebase Storage - Bildvorschau beim Hochladen

Question

Ich versuche, das hochgeladene img nach der Upload-Task zu zeigen, aber wegen des asynchronen Ladens versucht die Ansicht, es anzuzeigen, bevor der Upload beendet ist.

Dies ist die Methode:

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; 
    } 

Und dies ist die Ansicht:

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

Die letzten beiden Zeilen des Verfahrens sind die, die zu früh welche Last Art und Weise. Ich habe auch versucht, sie in die Erfolgsfunktion zu verschieben. Das Problem ist, dass, wenn ich sie dorthin verschiebe, this nicht mehr auf die Klasse verweist und ich die Werte in der Ansicht nicht ändern kann.

Answer 1

Der Verlust der Referenz auf this ist ein häufiges Problem in Javascript, und es gibt ein einfaches Muster, um es zu verfolgen. Du hast Recht über die Linien in der Erfolgsfunktion bewegen, tut dies nur am Anfang:

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

Jetzt that wird verweisen auf die ursprünglichen this, immer und folgende wird wie erwartet:

}, 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; 
});