森欄
2022-12-22 13:15:51
進度條僅在 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); })}}
1 回答

墨色風雨
TA貢獻1853條經驗 獲得超6個贊
在處理與 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 的運行上下文中。
添加回答
舉報
0/150
提交
取消