将图像上传到 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 => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Uploaded fraction: " + status.fractionCompleted);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(status.percentageCompleted.valueOf()==100){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("Upload Completed Succesfully");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.zone.run(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.percent=status.percentageCompleted.valueOf();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Percentage complete: " + status.percentageCompleted);&nbsp; &nbsp; &nbsp; &nbsp; }这确保了“百分比”类属性的更新反映在 Angular 的运行上下文中。