Vimeo API 方法中的变量`undefined`

Question

所以我在我的 Angular 8 应用程序中嵌入了一个 vimeo 视频，现在我试图在视频开始播放和结束后触发一些动画。本质上，如果屏幕宽度为 <800，则变量 isMobile 为 true。接下来，我调用了 vimeo play 方法，该方法检查 isMobile 是否为 true，并将 load_completed（这是动画触发器）设置为 true。问题是我的变量isMobile returns undefined，这是为什么呢？

  isMobile = false;

  constructor() { }

  ngOnInit() {
    this.innerWidth = window.innerWidth;
    console.log(this.innerWidth);
    if (this.innerWidth < 800) {
      this.isMobile = true;
    }

    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
      //isMobile returns undefined why?
      console.log(this.isMobile);
      if (this.isMobile) {
        this.load_completed = true;
      }
      console.log('Played the video');
    });

    player.on('ended', function(data) {
      console.log('Video ended');
    });
  }

Answer 1

尝试使用 arrow function as follows , here is the explanation

player.on('play',()=>{
 console.log(this.isMobile);
})

Answer 2

这里实际上有 2 个选项。

提到的箭头函数默认使用this作为当前定义位置的this。

或者你可以在函数定义中绑定this

player.on('play',function (){
 console.log(this.isMobile);
}.bind(this));

Vimeo API 方法中的变量`undefined`

Variable `undefined` in Vimeo API method

javascript

undefined

vimeo

angular