javascript - Ionic 2 范围 slider 导致 "Expression value changed after it was checked"错误

Question

我正在 ionic 2 中构建音频播放器并使用 javascript Audio() 对象。但是当我将 ionic 2 range slider 附加到音频播放器以显示进度时，它不会移动，除非用户在应用程序上执行了另一个操作。当在应用程序中执行不同的操作时，它会抛出此异常

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();
  }
}

任何想法可能是什么问题？

Answer 1

Angular 2 使用 Zone.js为其默认更改检测方法提供动力，该方法对异步浏览器功能进行猴子补丁，如 setTimeout和 setInterval这样它就可以在发生更新时刷新更改检测树。

但是，它无法弄清楚 currentTime 之类的东西。更改音频元素。在 Debug模式下，Angular 足够聪明，可以知道该绑定(bind)的值自上次检查后发生了变化，并引发错误(因为这意味着您有副作用代码，并且不会在更改时正确刷新)。如果启用了生产模式，这个错误就会消失，但理想情况下你不应该诉诸于此。

相反，请使用 timeupdate 音频元素标签的事件并且只刷新currentTime发生时绑定(bind)。 Zone.js可以处理事件监听器，所以 Angular 不会提示。

@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;
    });
  }
}