Change detection works only first property updated by setInterval but fails on the second property

Ionic Framework ionic-v3
1

I have a curious issue. I have 2 timer clocks that count up. One for recording and one for playback.
The recording clock UI is updated during recording but the playback clock will not. It seems that change detection only works on the first property but not on the second. Each of property is updated by its own instance of a setInterval timer.

From logs – I can see that the playback interval timer is firing and updating the playback clock property, but the View is not being updated!

What’s going on behind the scene? I would like to understand better how when view update is triggered in Ionic.

Thanks in advance

// template
<ion-col>
<div>RECORDING: {{clock_rec}}</div> /* UPDATES with each interval tick*/
</ion-col>
<ion-col >
<div >PLAYING: {{clock_play}}</div> /* DOES NOT UPDATE with interval tick. Updates only after playback complete! */
</ion-col>

export class RecordIntroPage {
// Code simplified to illustrate problem

// Recording clock
clock_rec: string = '00:00';
elapsed_rec: number = 0; // ms
intervalId;

// playback clock
clock_play: string = '00:00';
elapsed_play: number = 0;
intervalId_play;

onStart(  ){
    let that = this;
    let updateHandlerFn = (status) => { 

        if (status == MEDIA_STATUS.RUNNING){
            // start recording clock
            that.intervalId = setInterval( function() {
                that.elapsed_rec += 500
                console.log('Elapsed time (s):', that.elapsed_rec/1000);
                that.clock_rec = that.clockFormat(Math.floor(that.elapsed_rec/1000));
                console.log('Clock (s):', that.clock_rec );
                }, 500);
        }
        else if (status == MEDIA_STATUS.STOPPED){
            // clean up
            that.recSvc.releaseMedia();
            clearInterval(that.intervalId);
        }
    }      
}

onPlay( ){
    let that = this;
    if (status == MEDIA_STATUS.RUNNING){
        // start playback clock
        that.intervalId_play = setInterval( function() {
            that.elapsed_play += 500;
            console.log('Play Elapsed time (s):', that.elapsed_play/1000);
            that.clock_play = that.clockFormat(Math.floor(that.elapsed_play/1000));
            console.log('Clock (s):', that.clock_play);
            }, 500);
    }
    else (status == MEDIA_STATUS.STOPPED){
        that.recSvc.releaseMedia();
        clearInterval(that.intervalId_play);
    }

}
2

I’m surprised this even compiles, because that would seem to be undefined in onPlay(). You can avoid all the that = this nonsense if you never type the word function inside the body of one, and instead use fat arrow functions every time you are tempted to do so.