Угловое событие 6 прокрутки

Question

В моем компоненте реализовано событие прокрутки с использованием Angular's cdkScrollable.

Мой код выглядит следующим образом

export class HomeComponent {
    public hide = true;

    constructor(public scrollDispatcher: ScrollDispatcher) {
        this.scrollDispatcher.scrolled().subscribe((cdk: CdkScrollable) => {
            offset = cdk.getElementRef().nativeElement.scrollTop || 0;

            if (offset > 50) {
                this.hide = false;
            } else {
                this.hide = true;
            }
        });
    }
}

А мой home.component.html имеет следующий код

<p>{{hide}}</p>

проблема в том, что значение hide не меняется даже при прокрутке после 64, но в console.log оно изменяется.

Что я делаю не так?

Answer 1

Попробуйте: 1. Импортируйте NgZone:

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';

Создайте частный доступ к NgZone в конструкторе и обновите свои значения, используя NgZone:

constructor(private scroll: ScrollDispatcher, private zone: NgZone) { this.scrollDispatcher.scrolled().subscribe((cdk: CdkScrollable) => { this.zone.run(() => { // Your update here! }); }) } Для получения дополнительной информации прочитайте эту статью: https://sumodh.com/2018/03/31/how-to-force-update-a-variable-in-angular-4-angular-5/

Answer 2

ScrollDispatcher не работает в цикле углового обновления.Вам нужно запустить свои изменения в NgZone

this.zone.run(_ => {
  this.hide= false;
});