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

Это потому, что ваши изменения сделаны вне цикла обнаружения изменений angular (с обработчиком on)

Используйте ChangeDetectorRef для уведомления angular о ваших изменениях

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef){}


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

    //Your code here
    this.currentTranslate = Math.abs(translate);
      this.windowWidth = window.screen.width;
      //...
    this.cdr.detectChanges();// Call this method
});//end translate

Answer 2

Ключевое слово

this в Javascript function() относится к области действия функции. Чтобы использовать переменные-члены, используйте функции стрелок. Вы можете попробовать следующее

ngAfterViewInit() {
  this.swiper.on('setTranslate', (translate) => {  // <-- arrow function instead of `function()` construct
    this.currentTranslate = Math.abs(translate);
    this.windowWidth = window.screen.width;
    if (this.currentTranslate == this.windowWidth) {
    .
    .
    .
  })
}