-1

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

Subscriber.js:229 未捕获的异常：./player 类播放器中的错​​误 - 内联模板：9:105 原始异常：表达式在检查后已更改。以前的值：'3.17455955686814'。当前值：'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();
  }
}

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

4

1 回答 1

1

Angular 2 使用Zone.js为其默认更改检测方法提供支持，该方法对异步浏览器功能进行猴子补丁setTimeout，setInterval以便在发生更新时刷新更改检测树。

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

相反，使用音频元素标签的事件，并且仅在绑定发生时timeupdate刷新。可以处理事件监听器，所以 Angular 不会抱怨。currentTimeZone.js 

@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;
    });
  }
}
于 2016-08-06T07:55:29.517 回答