将图像上传到 firebase 时 Nativescript ProgressBar 没有更新

Question

进度条仅在 status.percentageCompleted 等于 100 后才更新。如何与进度同时更新？谢谢这是我的 HTML 文件    <Progress [value]="percent" [maxValue]="100">    </Progress>    <Button class="uploadButton" text="Upload" (tap)="uploadFile()"></Button>这是我的 .ts 文件@零件（{selector: "progressbar-page",templateUrl: "progressbar-page.html",styleUrls : ["./progressbar-page.css"]})导出类进度条页面{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);

        }

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