Ползунок диапазона Ionic 2 вызывает ошибку "Значение выражения изменилось после того, как оно было проверено"

Question

Я строю аудиоплеер в ionic 2 и использую объект JavaScript (). но когда я прикрепляю слайдер ионного диапазона 2 к аудиоплееру, чтобы показать прогресс, он не сдвигается, если пользователь не выполнит другое действие в приложении. И когда в приложении выполняются различные действия, оно выдает это исключение.

Subscriber.js:229 Uncaught ИСКЛЮЧЕНИЕ: Ошибка в проигрывателе класса./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();
  }
}

Есть идеи, в чем может быть проблема?

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