Dynamic Data binding problem

Ionic Framework ionic-v3
1

I have the following code, and I can’t get this.percentage to dynamically update in my app (progress bar). When I print it to the console, it works and updates the values accordingly. I think there’s something wrong with my dynamic data binding. Any advice will be highly appreciated!

   varTemp.on('state_changed',
    function progress(snapshot) {
      this.percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log("percentage: " + this.percentage);
    },
    function error(err) {},
    function complete() {});
2

I only see code that fills “this.percentage” on the state_changed event. You say yourself that this is working.
What does the UI code look like?

3

Thanks for your feedback. Here’s my UI code, I’ve implemented it via a custom component for the progress-bar.

<progress-bar [progress]="percentage"></progress-bar>

4

Try it with a fat arrow function. I think this.percentage is out of scope since you’re using an oldschool function.

5

I suspect this is falling through the cracks of change detection. Consider injecting a ChangeDetectorRef and calling its detectChanges() method after you modify the progress property.