Ionic 2 范围滑块导致 "Expression value changed after it was checked" 错误

Question

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

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 音频元素上发生的变化。在调试模式下，Angular 足够聪明，知道该绑定的值自上次检查以来已更改，并抛出错误（因为这意味着您有副作用代码并且不会在更改时正确刷新).如果启用生产模式，此错误将消失，但理想情况下您不需要求助于此。

而是使用音频元素标记的 timeupdate 事件，并且仅在 currentTime 绑定发生时刷新它。 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;
    });
  }
}

Ionic 2 范围滑块导致 "Expression value changed after it was checked" 错误

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

javascript

audio

ionic2

ion-range-slider

angular