Question

我已经使用angular的cdkScrollable在组件上实现了滚动事件。

我的代码如下所示

s = df.assign(Value_mask=df['Value'].where(df['Ready'].eq(1)))\
      .groupby('Group')['Value_mask'].ffill()

df['Value'] = s.where(df['Signal'].gt(1))

   Group  Signal  Ready  Value
0      1       0      0    NaN
1      1       0      1    NaN
2      1       0      0    NaN
3      1       4      0   72.0
4      1       4      0   72.0
5      1       4      0   72.0
6      2       0      0    NaN
7      2       7      0    NaN
8      2       7      0    NaN
9      2       7      0    NaN

我的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

问题在于，即使滚动超过64，hide的值也不会改变，但是在console.log中，它的值会改变。

我在做什么错了？

Answer 1

ScrollDispatcher没有在角度更新周期中运行。您需要在NgZone中运行更改

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

Answer 2

尝试一下： 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 3

我已使用ChangeDetectorRef中的@angular/core来手动触发更改检测。

export class HomeComponent {
    public hide = true;

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

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

Angular 6滚动事件

3 个答案: