Angular ngClass不动态更新类

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

我使用的是Angular Material

CdkScrollable

，我成功地检索到了scroll事件，该事件为我提供了到顶部有多远的数据

我遇到的问题是，当我滚动时，CSS类永远不会改变。我正在使用

console.log

验证变量

iscrowled

是否在我再次向下和向上滚动时正确更新。这样看来效果不错。我正在使用一个带有三元组的

ngClass

来验证应该应用哪个CSS类

很明显我错过了什么

html

...

ts

export类MainNavComponent实现AfterViewInit{
@ViewChild（MatSidenavContainer，{static:false}）sidenavContainer:MatSidenavContainer；
IScrowled:boolean=false；
ngAfterViewInit（）{
this.sidenavContainer.scrollable.elementScrolled（）.subscribe（（x）=>{
如果（（x.target）.scrollTop>0）{
this.isscrowled=true；
}否则{
这个是crowled=false；
}
console.log（这个是crowled）；
})
}
}

在对象语法中使用

ngClass

，如

<nav [ngClass]="{'navbar-desktop-scrolled' :isScrolled, 'navbar-desktop': !isScrolled}">
   ...
</nav>

...

查看文档：

对象键是CSS类，当值中给定的表达式计算为真实值时，会添加这些类，否则会删除它们

它应该是这样的：

<some-element [ngClass]="{'navbar-desktop-scrolled': isScrolled , 'navbar-desktop' : !isScrolled  }">...</some-element>

。。。

您的代码无法工作，因为未检测到更改。将可观察的与

async

管道结合使用。它会自动为您处理订阅

export类MainNavComponent实现AfterViewInit{
@ViewChild（MatSidenavContainer，{static:false}）
sidenavContainer:MatSidenavContainer；
navbarType$：可观察；
ngAfterViewInit（）{
this.navbarType$=this.sidenavContainer.scrollable.elementScrolled（）.pipe(
映射（x=>x.target.scrollTop>0
？“导航栏桌面已滚动”
：“导航栏桌面”
)
)
}
}

在模板中使用

---

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

export类MainNavComponent实现AfterViewInit{
@ViewChild（MatSidenavContainer，{static:false}）sidenavContainer:MatSidenavContainer；
IScrowled:boolean=false；
构造函数（私有引用：ChangeDetectorRef）{}
ngAfterViewInit（）{
this.sidenavContainer.scrollable.elementScrolled（）.subscribe（（x）=>{
如果（（x.target）.scrollTop>0）{
this.isscrowled=true；
}否则{
这个是crowled=false；
}
此.ref.detectChanges（）；
})
}
}

抱歉，没有区别。您链接到的文档还显示：string-字符串中列出的CSS类（以空格分隔）已添加。请以stackblitz的形式发布一个完整的最小示例，再现该问题。您发布的内容中有太多未知内容。您不会在

MatSidenavContainer

上滚动，而是在

host

元素上滚动，因此不会触发滚动事件。在

x

上也没有

target

属性。结果就是

{isTrusted:true}

。您只能查看用户是否已滚动，而不能查看滚动位置。我现在创建了一个更清晰的示例。正如您所看到的，MatSidenavContainer确实对滚动事件做出了反应。我正在将scrollTop值记录到控制台。您的意思是，为了让DOM检测更改，必须在这里使用异步管道吗？请随意编辑StackBlitz。我的目标是让导航栏的背景颜色从暗蓝色变为浅蓝色，正如您在CSS类中看到的那样。我尝试使用异步管道，但我无法让它工作。这是一场闪电战，

<nav [ngClass]="{'navbar-desktop-scrolled' :isScrolled, 'navbar-desktop': !isScrolled}">
   ...
</nav>

<some-element [ngClass]="{'navbar-desktop-scrolled': isScrolled , 'navbar-desktop' : !isScrolled  }">...</some-element>