角視圖模型後沒有更新的變化

我有一個簡單的角度應用程序中使用下面的JavaScript網頁音頻對象是角視圖模型後沒有更新的變化

app.component.ts

export class AppComponent { 
    title = 'media player'; 
    audio; 
    currentTime: number; 

    constructor() { 
    this.audio = new Audio(); 
    this.audio.src = './Music/demo2.MP3'; 
    this.audio.play(); 
    this.currentTime = this.audio.currentTime; 
    } 
}

和 app.component.ts

播放音頻

<h4>{{ currentTime }}</h4>

一切工作正常，但認爲不作爲模型更新改變

來源

2017-10-21 Ochui Princewill

您不能綁定到'audio.currentTime'嗎？ – user184994

這是因爲此行'this.currentTime = this.audio.currentTime;'只在組件加載時運行一次。您需要確保每秒更新一行。或者@ user184994方法也可以工作。 –

@PraveenM是我低於和'this.currentTime = this.audio.currentTime;'只運行一次。請你知道一種方法來使這些工作。 –

角不更新瀏覽器的事件相同的角用途zonejs這猴子補丁幾個瀏覽器事件綁定，它觸發detectChanges方法保持同步結合。

在這種情況下，Angular不會更新綁定，因爲Audio API事件不會通過zonejs進行修補。對於這種情況，您必須手動運行更改檢測以手動更新綁定。您可以使用audio API的ontimeupdate事件處理程序。

import { ChangeDetectorRef, Component } from '@angular/core'; 

export class AppComponent { 
    title = 'media player'; 
    audio; 
    currentTime: number; 

    constructor(private cd: ChangeDetectorRef) { 
    } 
    ngOnInit(){ 
    this.audio = new Audio(); 
    this.audio.src = './Music/demo2.MP3'; 
    this.audio.play(); 
    //this will make sure to update when time updates. 
    this.audio.ontimeupdate = (event) => { 
     this.currentTime = this.audio.currentTime; 
     this.cd.detectChanges(); 
    } 
    } 
}

來源

2017-10-21 18:09:15

作品像魅力..非常感謝！ –

-2

這裏是setInterval方法

export class AppComponent { 
 
    title: string = 'media player'; 
 
    audio: Audio; 
 
    currentTime: number; 
 

 
    constructor() { 
 
    this.audio = new Audio(); 
 
    this.audio.src = './Music/demo2.MP3'; 
 
    this.audio.play(); 
 
    this.currentTime = this.audio.currentTime; 
 
    } 
 
    
 
    ngOnInit() { 
 
    setInterval(() => { 
 
     this.currentTime = this.audio.currentTime; 
 
    }, 1000); 
 
    } 
 
}

但是如前所述，單純只使用audio.currentTime的前端可能會簡單得多，有效的方法的@ user184994。

<h4>{{ audio.currentTime }}</h4>

來源

2017-10-21 17:22:13

我認爲'setInterval'代碼味道。它使代碼和測試複雜化，並且在OP正試圖完成時似乎沒有必要。 – stealththeninja

@stealththeninja OP的問題是'currentTime'在音頻播放時不會持續更新，這是我會考慮的一種方法。這就是爲什麼我提到使用'audio.currentTime'本身，正如我所假設的那樣，在音頻播放過程中會更新，這是非常穩定和有效的。 –

最好是通過'setInterval'使用事件偵聽器，媒體元素有'timeupdate'事件：https：//developer.mozilla.org/en-US/docs/Web/Events/timeupdate – stealththeninja

角視圖模型後沒有更新的變化

回答

相關問題