Javascript ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。以前的值：'；ngIf:true'；。当前值：'；ngIf:false'；

我有一个Angular 10应用程序，我正在尝试从登录组件中删除navside组件，因此我在navside组件上创建了一个包含以下代码的服务：

可见：布尔值；
构造函数（）{
可见=真实；
}
show（）{
可见=真实；
}
隐藏（）{
可见=假；
}
切换（）{
this.visible=！this.visible；
}
doSomethingElseUseful（）{}

在naveside组件中，我放了：

导出类NavsideComponent实现OnInit{
构造函数（公共sr:ServService）{}
ngOnInit（）：void{
}

以及Html组件：

.
.
.
.
.
. 

但显示了此错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

编辑1

Login.component.ts

从'@angular/core'导入{Component，OnInit}；
从“../../navside/serv.service”导入{ServService}；
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.css']
})
导出类LoginComponent实现OnInit{
构造函数（私有sr:ServService）{}
ngOnInit（）：void{
这个.sr.hide（）；
这个.sr.doSomethingElseUseful（）；
}
}

编辑2

Stackblitz将上面的片段放在一起，可以看到警告：

---

我已经编辑了你的帖子，其中包含了一个Stackblitz，其中包含了报告错误的最小可复制示例。我建议你在下一篇帖子中包含一个最小可复制示例，因此你更有可能得到答案

关于ExpressionChangedTerrithasbeenscheckedError警告

本帖提供了有关此警告的有用信息：

在您的特定情况下，会显示警告

表达式changedafterithasbeenCheckedError

，因为

sr.visible

的值在初始化过程中更改了两次：

• 在服务期间执行一次服务

  SerService

  创建和
• 调用

  sr.hide（）

  时，再次在

  loginComponent.ngonit（）中

在同一轮更改检测中，绑定在视图中的值（

sr.visible

绑定在

中）不应多次更改值，这就是警告的原因

解决在正确组件中调用cdr.changeDetection（）的问题

您可以通过调用

cdr.detectChanges（）

来解决问题，以便启动第二轮更改检测。但要使其工作，您需要在具有受影响绑定的组件中调用它

在LoginComponent上调用cdr.detectChanges（）没有效果，因为

的绑定不在该组件中。您应该在绑定所在的父组件中调用cdr.detectChanges（）

也就是说，在LoginComponent中使用cdr.detectChanges（）并不能解决问题：

导出类登录组件{
构造函数（私有sr:ServService，私有cdr:ChangeDetectorRef）{}
恩戈尼尼特（）{
这个.sr.hide（）；
这个.sr.doSomethingElseUseful（）；
//以下代码无法解决问题：
this.cdr.detectChanges（）；
}
}

解决此问题的方法是在具有绑定的组件上调用cdr.detectChanges（）

在我的工作stackblitz中（在回答的末尾），该组件是AppComponent：

app.component.html

：

工具栏在这里
你在任何地方调用sr.show（）吗？我在登录组件上调用sr.hide（）。你能编辑你的帖子并包含登录组件吗？ts代码？完成后，我添加了它，感觉像是一个
this.cdr.detectChanges（）；
on
ngOnInit（）
可以解决如下所述的问题：