将图像上传到 firebase 时 Nativescript ProgressBar 没有更新（仅在 100% 后更新）

Question

进度条仅在 status.percentageCompleted 等于 100 后才会更新。如何与进度同时更新它？谢谢

这是我的 HTML 文件

    <Progress [value]="percent" [maxValue]="100">
    </Progress>
    <Button class="uploadButton" text="Upload" (tap)="uploadFile()"></Button>

这是我的 .ts 文件

@Component({

selector: "progressbar-page",
templateUrl: "progressbar-page.html",
styleUrls : ["./progressbar-page.css"]

})

导出class进度条页面{

message='';
path="";
Completion="";
percent;
constructor(private zone:NgZone){}

public ngOnInit() :void {
    this.path= knownFolders.currentApp().path+"/images/crime.jpg";
 }

uploadFile() {

    var metadata = {
        contentType: "Image",
        contentLanguage: "fr",
        customMetadata: {
          "foo": "bar",
           "foo2": "bar2"
        }
      };

    const appPath = knownFolders.currentApp().path;
    const logoPath = appPath+"//images//test.jpg"

    storage.uploadFile({
        bucket:  "gs://hri7238.appspot.com",
        remoteFullPath: 'uploads/images/firebase-storage.png',
        localFile: File.fromPath(logoPath),
        localFullPath: logoPath,
        onProgress: status => {
            console.log("Uploaded fraction: " + status.fractionCompleted);
            if(status.percentageCompleted.valueOf()==100){
               alert("Upload Completed Succesfully");
            }
            this.percent=status.percentageCompleted.valueOf();
            console.log("Percentage complete: " + status.percentageCompleted);
        },metadata
    }).then(uploadedFile => {
        console.log("File uploaded: " + JSON.stringify(uploadedFile));
        this.message = "File uploaded: " + JSON.stringify(uploadedFile);
    }).catch(err => {
        alert("There was a problem uploading")
        console.log(err);
    })
}

}

Answer 1

在处理与 Angular 的运行上下文无关的任何类型的第 3 方库时，有时元素不会正确更新。在这种情况下，您可以通过 Angular 提供的区域 api.

进行更新

我看到您已经将 NgZone 作为构造函数的依赖项注入，因此请尝试将您的进度处理程序编辑到此：

onProgress: status => {
            console.log("Uploaded fraction: " + status.fractionCompleted);
            if(status.percentageCompleted.valueOf()==100){
               alert("Upload Completed Succesfully");
            }

            this.zone.run(() => {
               this.percent=status.percentageCompleted.valueOf();
            });
            
            console.log("Percentage complete: " + status.percentageCompleted);
        }

这确保“百分比”class 属性的更新反映在 Angular 的运行ning 上下文中。

将图像上传到 firebase 时 Nativescript ProgressBar 没有更新（仅在 100% 后更新）

Nativescript ProgressBar is not getting updated while uploading image to firebase(only updating after 100%)

javascript

firebase

progress-bar

nativescript

firebase-storage