Nativescript ProgressBar не обновляется при загрузке изображения в firebase (обновляется только после 100%) - PullRequest
Новая
       151

Nativescript ProgressBar не обновляется при загрузке изображения в firebase (обновляется только после 100%)

0 голосов
/ 06 августа 2020

Progressbar обновляется только после того, как 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"]

} )

страница индикатора выполнения класса экспорта {

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

}

1 Ответ

0 голосов
/ 06 августа 2020

При работе с любой сторонней библиотекой, которая не привязана к контексту выполнения Angular, иногда элементы не обновляются должным образом. В этом случае вы можете обновить с помощью 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.

...