时间戳

首页 > 解决方案 > 模板不知道窗口中更新的变量的变化

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;
}

组件.html

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

任何人都知道如何更新变量window并反映在视图上？

标签： angular

解决方案

我完全改变了我以前的答案，因为在你的情况下这似乎不是问题

我不确定为什么属性没有更新，template但值在ts- 可能是window我认为的功能问题

经过一些研究，我手动触发了更改onPlayerStateChange(event)

注入ChangeDetectorRef你的构造函数

constructor(private 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;     
    }; 
  }

希望它可能有效，解决方案可能不是传统方式，但您可以将其用作解决方法 - 快乐编码:)

推荐阅读