Progressbar on page not updating during file transfer in a for loop


#1

Hey guys,

I am trying to download multiple files with the file transfer plugin from ionic native. The list of files to download comes from a json data stream. A progressbar on a page should show me the progress of the download (not the download progress of a single file but the progress of all successful downloaded files together).
The simple form of the code is the following:

this.http.get(uritojson).map(res => res.json()).subscribe(data => { //getting json data
for (var i = 0; i < numberoffiles; i++) {
this.fileTransfer.download(downloaduri, targeturi, true).then(
this.loadProgress = i/numberoffiles * 100; //this is the variable for the progressbar
filesleft--;
if (filesleft == 0){
alert("Download finished")
}}}}

But in the page with the progressbar the progressbar just jumps from 0 to 100 when the alert (line 7) is popping up. It is not floating like it should be. How do I get the progressbar floating / showing the actual value of every loop? Either the variable is not getting updated during the loop or the html page is not refreshing during the loop. Please help. :frowning:

Thanks!