-1

Ionic 2 でオーディオ プレーヤーを構築し、javascript Audio() オブジェクトを使用しています。しかし、進行状況を表示するためにイオン 2 レンジ スライダーをオーディオ プレーヤーにアタッチすると、ユーザーがアプリで別のアクションを実行しない限り、シフトしません。そして、アプリでさまざまなアクションが実行されると、この例外がスローされます

Subscriber.js:229 Uncaught EXCEPTION: ./player クラス 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、audio 要素タグのイベントを使用し、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;
    });
  }
}
于 2016-08-06T07:55:29.517 に答える