Angular 模板不使用'；不知道窗口中更新的变量的变化

视图无法更新

status

变量的值

这是我的代码摘录，删除了不相关的代码：

组件。ts

export class MyComponent implements OnInit {
   private status: string;

   ngOnInit() {
      this.status = "abc"; // OK binding

      window['onYouTubeIframeAPIReady'] = (e) => {
            this.player = new window['YT'].Player('player', {
              videoId: this.video.videoId,
              events: {
                'onStateChange': this.onPlayerStateChange.bind(this)     
              }
            });
        };
    }

    onPlayerStateChange(event) {
       switch (event.data) {
          case window['YT'].PlayerState.PLAYING:
              this.status= "xyz"; //Not possible binding
              break;
}

component.html

<span>{{status}}</span> // it shows only abc, the expected is xyz

{{status}}//仅显示abc，预期为xyz

---

任何人都知道如何更新

窗口中的变量，它会反映在视图上
 更改：
私有状态：字符串

至
公共状态：字符串

声明的变量必须是公共的，模板才能访问它们。这里的解释很好：
我完全改变了我以前的答案，因为在你的情况下这似乎不是问题

我不确定为什么属性没有在
模板上更新
，但是
ts
中的值发生了更改-我认为可能是
窗口
函数问题

经过一些研究，我已经手动触发了
onPlayerStateChange（事件）

在构造函数中注入
ChangeDetectorRef

构造函数（私有dect:ChangeDetectorRef）{}

添加
this.dect.detectChanges（）更改属性后-查看下面的代码

onPlayerStateChange(event) {
    switch (event.data) {
      case window['YT'].PlayerState.PLAYING:
          this.name = "yyy";
          this.dect.detectChanges(); //this will manually trigger the changes on your properties
          console.log("I'm playing");
        break;     
    }; 
  }

希望它能起作用，解决方案可能不是一种传统的方法，但您可以将其用作一种变通方法-愉快的编码：）
此外，测试变量change
this.name='yyy'，最好通过单击按钮或设置超时（（）=>{this.name='yyy'；}，0）来完成它应该修复它，确保您正在测试
状态的变化
变量OK。尝试使用
setTimeout
而不是
onPlayerStateChange（event）
函数。如果这不起作用，我建议设置一个Plunkr，这样我们就可以评估完整的代码：）哈，真的。setTimeout确实改变了模板中的变量：-所以你的问题似乎是YouTube事件的范围问题..像Rahul一样注入ChangeDetectorRef也意味着下面将解决它：你是否尝试过生命周期钩子扫描你用视频示例进行了stackblitz？
窗口.onload
示例不起作用，因为未触发事件（请参阅）。设置事件处理程序时，该窗口可能已加载。
window.onload
仍然不工作，即使使用
setTimeout
，因为未执行事件处理程序。您可以使用
控制台.log
对其进行测试。那么，回到我最初的问题：您能为视频案例提供stackblitz吗？没问题-：）