Ionic 2 range slider causing "Expression value changed after it was checked" error

Question

I am building an audio player in ionic 2 and using the javascript Audio() object. but when i attach an ionic 2 range slider to the audio player to show progress it doe not shift except another action is carried out by the user on the app. And when different actions ae being carried out in the app it throws this exception

Subscriber.js:229 Uncaught EXCEPTION: Error in ./player class player - inline template:9:105 ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '3.17455955686814'. Current value: '3.1862762409060017'

@Component(
  template:`
      <div>
   <ion-range min='0' max='100' style="margin-top;0px;padding-top:0px;padding-bottom:0px;" [(ngModel)]="audio.currentTime*100/audio.duration" danger ></ion-range>
      </div>
    `
)
export class player{
  
  audio:any;
  constructor(){
    this.audio=new Audio();
    this.audio.src='songs/bing.mp3';
    this.audio.play();
  }
}

Any ideas what could be the problem?

score 1 · Accepted Answer · answered Aug 06 '16 at 07:55

Angular 2 uses Zone.js to power its default change detection method, which monkey-patches async browser functions like setTimeout and setInterval so that it can refresh the change detection tree whenever an update occurs.

It won't, however, be able to figure out about something like currentTime changing on an audio element. In debug mode, Angular is smart enough to know that the value for that binding has changed since it last checked, and throws an error (because it means you have side-effecty code and that won't refresh properly on changes). This error will go away if production mode is enabled, but ideally you shouldn't need to resort to that.

Instead, use the timeupdate event of the audio element tag and only refresh the currentTime binding when it occurs. Zone.js can handle event listeners, so Angular won't complain.

@Component(
  template:`
      <div>
         <ion-range min='0' max='100' style="margin-top;0px;padding-top:0px;padding-bottom:0px;" [(ngModel)]="currentTime*100/audio.duration" danger ></ion-range>
      </div>
    `
)
export class player{
  audio:any;
  currentTime: number;
  constructor(){
    this.audio=new Audio();
    this.audio.src='songs/bing.mp3';
    this.audio.play();
    this.audio.addEventListener('timeupdate', () => {
        this.currentTime = this.audio.currentTime;
    });
  }
}

Ionic 2 range slider causing "Expression value changed after it was checked" error

1 Answers1