Javascript 显示的进度。使用Iframe youtube播放器api播放视频

我使用他们的ipframe API嵌入了youtube视频。我能够加载视频并播放。但是，我想在UI上显示视频的当前时间。在出现UI事件之前，它不会刷新，就像我单击按钮一样。我用的是角度8。以下是我的模板代码：

...
<button class="btn btn-dark mb-5" (click)="onMute()">Mute</button>
<button class="btn btn-dark mb-5" (click)="onUnmute()">Unmute</button>
</div>
<p>Progress: {{videoProg}}</p>

<!-- YT Player will embed IP frame below.-->
<div class="mt-1" id="player"></div>

以下是UI的外观：

正如我所料：）您的事件来自youtube库中一个非所谓的猴子补丁事件系统。从这里触发的任何事件都不会被zone.js修补，因此将在zone.js之外运行

要解决此问题，您需要注入

NgZone

并使用

NgZone.run（）

将代码返回到更改检测中：

constructor(private ngZone: NgZone) {}

events: {
  'onStateChange': (event) => this.ngZone.run(() => this.onPlayerStateChange(event)),
  'onError': (event) => this.ngZone.run(() => this.onPlayerError(event)),
  'onReady': (event) => this.ngZone.run(() => this.onPlayerReady(event))
}

---

您能显示更多代码吗？什么样的可观测是“源”。它从何处获得事件源只是从rxjs中可以观察到的一个简单问题。常数源：可观测=间隔（10000）；你在使用OnPush吗？没有。那是什么？我是JavaScription的初学者，你能展示更多的代码吗？或者创建一个stackblitz来显示您的问题。还显示您的cleanTime（）方法

constructor(private ngZone: NgZone) {}

events: {
  'onStateChange': (event) => this.ngZone.run(() => this.onPlayerStateChange(event)),
  'onError': (event) => this.ngZone.run(() => this.onPlayerError(event)),
  'onReady': (event) => this.ngZone.run(() => this.onPlayerReady(event))
}