Ionic 2レンジスライダーが "チェックされた後に式の値が変化しました"エラー

Question

私はionic 2でオーディオプレーヤーを構築しており、javascriptのAudio（）オブジェクトを使用しています。しかし、オーディオプレーヤーにイオン2レンジスライダーを接続すると、進捗状況が表示されます。これは、ユーザーがアプリケーションで別のアクションを実行する以外はシフトしません。 229キャッチされない例外：と異なるアクションが、それはこの例外に

Subscriber.jsをスローアプリで行われるAEとき./playerクラスのプレーヤーでエラーが発生しました - インラインテンプレート：9：105 元の例外：Expressionが変更されましたそれが確認された後。以前の値： '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は、更新が発生するたびに、それは変化検出ツリーを更新することができるように、デフォルトの変化検出方法、setTimeoutとsetIntervalのような猿 - パッチ非同期ブラウザ機能に電力を供給するZone.jsを使用しています。

しかし、オーディオ要素でcurrentTimeのようなものが変更されることはありません。デバッグモードでは、Angularは、最後にチェックされてからバインディングの値が変更され、エラーをスローすることを知るには十分スマートです（副次的なコードがあり、変更時に正しくリフレッシュされないためです）。このエラーは、プロダクションモードが有効な場合は消えますが、理想的にはそれに頼る必要はありません。

代わりに、オーディオ要素タグのtimeupdateイベントを使用し、発生時にcurrentTimeバインディングのみを更新してください。 イベントリスナーを処理するので、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; 
    }); 
    } 
}