Question

该视图无法更新status变量的值。

这是我的代码的一部分，删除了不相关的代码：

component.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

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

Answer 1

我正在完全更改以前的答案，因为在您的情况下这似乎不是问题

我不确定为什么属性不会在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;     
    }; 
  }

希望它可行，解决方案可能不是传统的方法，但是您可以将其用作解决方法-快乐编码：）

Answer 2

更改：private status: string;

到public status: string;

声明的变量必须是公共的，模板才能访问它们。很好的解释：Should private variables be accessible in the template?

模板不知道在窗口中更新的变量的变化

2 个答案: