ngClass 不动态更新类

Question

每当滚动条不在顶部时，我想更改导航栏的外观。

我正在使用 Angular Material CdkScrollable，并且成功检索了滚动事件，该事件为我提供了有关其到顶部的距离的数据。

我遇到的问题是，当我滚动时，CSS 类永远不会改变。每当我再次向下和向上滚动到顶部时，我都会验证console.log变量是否已正确更新。isScrolled所以这似乎工作正常。我使用ngClass带有三元的 a 来验证应该应用哪个 CSS 类。

我缺少什么明显的东西？

html

<nav [ngClass]="isScrolled ? 'navbar-desktop-scrolled' : 'navbar-desktop'">
   ...
</nav>

ts

export class MainNavComponent implements AfterViewInit {
 @ViewChild(MatSidenavContainer, { static: false }) sidenavContainer: MatSidenavContainer;

 isScrolled: boolean = false;

 ngAfterViewInit() {
    this.sidenavContainer.scrollable.elementScrolled().subscribe((x) => {
      if ((<Element>x.target).scrollTop > 0) {
        this.isScrolled = true;
      } else {
        this.isScrolled = false;
      }

      console.log(this.isScrolled);
    })
  }
}

Answer 1

添加更改检测功能后，一切正常。

export class MainNavComponent implements AfterViewInit {
 @ViewChild(MatSidenavContainer, { static: false }) sidenavContainer: MatSidenavContainer;

 isScrolled: boolean = false;

 constructor(private ref: ChangeDetectorRef) { }

 ngAfterViewInit() {
    this.sidenavContainer.scrollable.elementScrolled().subscribe((x) => {
      if ((<Element>x.target).scrollTop > 0) {
        this.isScrolled = true;
      } else {
        this.isScrolled = false;
      }

      this.ref.detectChanges();
    })
  }
}