无法从 Firebase 存储 UploadTask 更新 ProgressBar答案

【问题标题】：Unable to Update ProgressBar from Firebase Storage UploadTask无法从 Firebase 存储 UploadTask 更新 ProgressBar
【发布时间】：2017-01-06 10:53:55
【问题描述】：

我正在使用 Angular2 和 Firbase 存储。我正在尝试获取“uploadProgress”值来更新（在 HTML 文件中指定），但是可以更新 uploadTask.on 函数中的“uploadProgress”变量。是因为它在另一个线程上运行吗？这个问题的任何解决方法？希望可以有人帮帮我。谢谢

=======================================================================
import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import * as firebase from 'firebase';

@Component({
  selector: 'app-create-folder',
  templateUrl: './create-folder.component.html'
})

 export class CreateFolderComponent { 

 public fItem: FolderItem;
 public f: File;
 public storageRef: Storage;
 public uploadProgress = 0;


constructor(public af: AngularFire) {}

onSubmit() {

const storageRef = firebase.storage().ref().child('myclient/' +     
this.fItem.file_name);
var uploadTask = storageRef.put(this.f);  


  uploadTask.on('state_changed', function(snapshot){
  this.uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) *  
  100;


  });

 }


 }

【问题讨论】：

标签： javascript firebase firebase-storage angularfire2

【解决方案1】：

是不是因为它在另一个线程上运行？

因为它在另一个上下文中运行。

为了解决问题，将 this 分配给 'state_changed' 回调函数之外的某个变量。之后，您可以将此变量用作对初始 this 实例的引用。

public uploadFile() {
        let self = this;
        ...
        firebaseUploadTask.on('state_changed',
            function progress(snapshot) {
                self.percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            },
            function error(error) {},
            function complete() {}
        );
    }

【讨论】：