Ползунок диапазона Ionic 2, вызывающий «изменение значения выражения после проверки»

Question

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

Subscriber.js: 229 Uncaught ИСКЛЮЧЕНИЕ: Ошибка в ./player класса плеера - встроенный шаблон: 9: 105 ORIGINAL ИСКЛЮЧЕНИЕ: Выражение изменилось после проверки. Предыдущее значение: «3.17455955686814». Текущее значение: '+3,1862762409060017'

@Component(
 
    template:` 
 
     <div> 
 
\t \t <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

Угловое 2 использует Zone.js для питания его метод обнаружения изменений по умолчанию, что обезьяна-пластыри функции асинхронной браузера, как setTimeout и setInterval так, что он может обновить дерево обнаружения изменения всякий раз, когда происходит обновление.

Это не будет, однако, иметь возможность узнать о чем-то вроде currentTime, изменяющемся на аудиоэлементе. В режиме отладки Angular достаточно умен, чтобы знать, что значение для этой привязки изменилось с момента последнего его проверки и выдает ошибку (потому что это означает, что у вас есть побочный код, и он не будет правильно обновляться при изменениях). Эта ошибка исчезнет, ​​если режим производства включен, но в идеале вам не нужно прибегать к этому.

Вместо этого используйте событие timeupdate тега аудиоэлемента и обновите привязку currentTime, когда это произойдет. Zone.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; 
    }); 
    } 
}