Angular DOM未更新

Question

我尝试使用滑块创建效果（我使用Swiper）。

我可以在移动事件中检索滑块的确切位置，我可以在console.log中看到该位置实时更新，但是更改未反映在DOM中，我也不明白为什么...

这是我的组件：

ngOnInit(){

    this.swiper = new Swiper(containerSelector, {
      width:375,
      slidesPerView: 1,
      initialSlide: 1
    });

  }

  ngAfterViewInit(){
    this.swiper.on('setTranslate', function(translate){
      this.currentTranslate = Math.abs(translate);
      this.windowWidth = window.screen.width;
      if(this.currentTranslate == this.windowWidth){
        // Home view
        console.log("middle !");
        this.scaleYahLogo = 1;
        this.scaleYahIcn = 0;
        this.opacityChatsGrey = 1;
        this.opacityChatsColor = 0;
        this.opacityProfileGrey = 1;
        this.opacityProfileColor = 0;
        this.headerPosi = 0;
      } 
      else if(this.currentTranslate < this.windowWidth){
        // Profile view
        console.log("left !");
        this.scaleYahLogo = 0;
        this.scaleYahIcn = 1;
        this.opacityChatsGrey = 0;
        this.opacityChatsColor = 1;
        this.opacityProfileGrey = 0;
        this.opacityProfileColor = 1;
        this.headerPosi = 0;
      }
      else if(this.currentTranslate > this.windowWidth){
        // Chats view
        console.log("right !");
        this.scaleYahLogo = 0;
        this.scaleYahIcn = 1;
        this.opacityChatsGrey = 0;
        this.opacityChatsColor = 1;
        this.opacityProfileGrey = 0;
        this.opacityProfileColor = 1;
        this.headerPosi = 0;
      }
    }) 
  }

我做错了什么？自昨天以来我一直在挣扎...

感谢所有人！

Answer 1

this关键字在Javascript function()中是指函数的范围。要使用成员变量，请使用箭头函数。您可以尝试以下操作

this.swiper.on('setTranslate', (translate) => {
.
.
.
}