使用共享组件时的ExpressionChangedAfterItHasBeenCheckedError
ExpressionChangedAfterItHasBeenCheckedError是Angular框架中的一个错误，表示在变更检测期间，模板中的表达式发生了改变。这个错误通常发生在组件在变更检测期间更新了一个在其子组件中绑定的属性或者触发了一个会导致模板中的表达式重新计算的事件。
这个错误的原因是Angular的变更检测机制。Angular会在组件的变更检测周期中，检查组件的属性和模板表达式是否一致。如果在检测周期内发现属性和表达式不一致，就会抛出ExpressionChangedAfterItHasBeenCheckedError错误。
为了解决这个错误，可以使用Angular提供的一些解决方案：
- 使用setTimeout函数延迟更新：可以将属性的更新操作放在setTimeout函数中，以便将更新操作推迟到下一个变更检测周期之后执行。
- 使用ChangeDetectorRef对象手动触发变更检测：可以通过注入ChangeDetectorRef对象，调用它的detectChanges方法手动触发变更检测。这样可以避免在变更检测期间更新属性时引发错误。
- 使用ngAfterViewChecked钩子函数：ngAfterViewChecked是Angular提供的一个生命周期钩子函数，它会在每次视图变更检测之后触发。可以在这个函数中更新属性，以避免ExpressionChangedAfterItHasBeenCheckedError错误。
- 检查组件设计：如果出现这个错误，可能是组件的设计有问题。可以考虑重新设计组件的结构，将属性的更新放在合适的时机执行，以避免在变更检测期间更新属性。
腾讯云相关产品和产品介绍链接地址：
腾讯云提供了全面的云计算解决方案，包括计算、存储、数据库、网络和安全等服务。以下是几个与云计算相关的腾讯云产品：
- 云服务器（CVM）：腾讯云提供的灵活可扩展的云服务器实例，可满足各种计算需求。详细信息可访问：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：腾讯云提供的关系型数据库服务，具备高可用、高性能、可扩展等特性。详细信息可访问：https://cloud.tencent.com/product/cdb_mysql
- 云函数（SCF）：腾讯云提供的事件驱动的无服务器计算服务，可让开发者按需运行代码。详细信息可访问：https://cloud.tencent.com/product/scf
请注意，上述链接只是腾讯云相关产品的介绍页面，具体使用和了解更多信息可以访问腾讯云官方网站。
相关·内容
我正在用angular 6.1构建自己的表单创建器。我已经做了重现代码--这是：
如示例所示。当你添加一些动态创建的字段时，angular会对保持不变的字段执行异步验证。当这些字段在ngFor循环中时，它也会抛出ExpressionChangedAfterItHasBeenCheckedError。
如果没有ngFor循环，则存在非ExpressionChangedAfterItHasBeenCheckedError
浏览 20提问于2018-08-07得票数 1
回答已采纳
1回答
当我在(change) action方法中调用服务时，我得到了以下错误：
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的价值：“ng-未触及:真”。现值：“ng-未触及:假”
我的代码：
onChange(event) {
const messageToDisplay = "Message test";
this.popinService.open(messageToDisplay).subscribe((result: ConfirmPopinResultType) =>
浏览 1提问于2019-01-02得票数 6
我有一个web应用程序，在不同的页面中抛出ExpressionChangedAfterItHasBeenCheckedError错误。这更像是一个警告，而不是一个错误，web应用程序运行良好。
目前，没有这样的选择来修正代码以消除这个错误，我需要业力测试来忽略它。
当我进行业力测试时，我得到的是：
Failed: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
有没有办法忽略这个特定的错误？
浏览 1提问于2018-09-20得票数 0
我需要在运行时动态地创建多个组件的实例。
我在互联网上找到了几个例子，包括StackOverflow和angular.io页面本身。
但是，当我为组件模型赋值时，总是会收到异常ExpressionChangedAfterItHasBeenCheckedError。
甚至这个功能的专用示例也会引发相同的异常：
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的值：“未定义”。现值：“庞巴托”。该视图似乎是在其父视图和其子视图被脏检查后创建的。它是否是在更改检测挂钩中创建的？
我应该忽略这一点，还是它可以/应该被修复？
浏览 0提问于2017-05-11得票数 5
回答已采纳
在ParentComponent =>中
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object]'.
at viewDebugError (vendor.bundle.js:8962)
at expressionChangedAfterItHasBeenCheckedError (ve
浏览 7提问于2017-06-22得票数 28
回答已采纳
一旦我从带有组件1的模块切换到使用组件2的模块，我就会得到以下错误：
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的值：'ngIf: object对象‘。当前值：“ngIf:对象对象、对象对象”
两个模块都使用
ChangeDetectionStrategy.OnPush
当我订阅自己的网站时，一切都很好：
this.bookings$.pipe(takeUntil(this._destroy$)).subscribe(res => console.log(res));
但是，一旦我使
浏览 1提问于2018-11-28得票数 2
我们有一个加载子组件的根布局组件。De布局组件绑定到共享布局服务中的属性。DE子组件设置共享布局服务中的属性。每当我们从子组件更改属性时，在非生产模式下都会得到以下错误: ExpressionChangedAfterItHasBeenCheckedError: Expression在检查后已更改
这真的很烦人。没有其他方法可以在不执行cdr.detectChanges()的情况下让它工作吗？
这是一个简单的场景，应该可以在…中使用
app.component.html
------------------
<layout>
</layout>
layout.comp
浏览 0提问于2018-11-09得票数 0
目前我有一个这样的布局 <parent-comp>
<child1> </child1>
<child2> </child2>
</parent-comp> 父组件具有固定高度( 1000px )子组件1有两种状态:展开( 200px )和折叠( 10px )我想使用这些信息来计算和更新子组件2的高度 我不想将child2 2的高度设置为auto (我需要一个特定值，因为这是将其传递到另一个库(虚拟滚动)的必要条件) 我如何才能做到这一点？ 我尝试使用ViewChild + E
浏览 24提问于2019-01-29得票数 2
回答已采纳
1回答
这又与ExpressionChangedAfterItHasBeenCheckedError有关。
在我的情况下，我有一个参数“data”，可以从ajax调用中恢复。此数据用于通过@input指令创建子数据。我希望绑定只在定义了数据时才发生。但我不知道怎么用角
export class UserComponent{
data: any
constructor(
private userService: UserService){
this.userService.getUser()
.subscribe(res
浏览 1提问于2017-04-27得票数 2
回答已采纳
这是我最初问题的延续。
stackoverflow.com/questions/44596418/angular-throws-expressionchangedafterithasbeencheckederror-with-textarea
还没有解决。我重新创建了原始柱塞来模拟实际的项目，发现它与文本区域无关。
当我通过单击列表中的项转到details页面时，会引发异常ExpressionChangedAfterItHasBeenCheckedError。只有当src/ CodeView的在数组中有多个元素时才会发生这种情况。CodeView项以详细形式定义字段。
import { For
浏览 3提问于2017-07-10得票数 5
回答已采纳
1回答
我有一个角度应用程序，用户按一个按钮，并触发一个动画。基本上，这是两张照片，互相切换，以创造一个运行的错觉。
起初，我的角色仍然是在我们开始播放的时候，它的图片是有动画的，但当它动画时，我得到：
ExpressionChangedAfterItHasBeenCheckedError
我的html：
<img [src]="isPlaying == false ? 'https://i.ibb.co/LgqQqFn/dino-1.png' : run()"/>
<button (click)="play()">Ru
浏览 8提问于2021-08-15得票数 0
回答已采纳
我已经尝试按照建议实现所有推荐的方法
然而，无论是与离子相结合，还是我自己的开发技能让我失望，我无法在不遇到ExpressionChangedAfterItHasBeenCheckedError错误的情况下让它工作。
我有一个项目列表，我希望能够独立选择或允许用户选择全部。
在.ts文件中，我有两个方法：
toggleSelectedUser(user) {
const index = this.selectedUsers.indexOf(user);
if (index >= 0) {
this.selectedUsers.splice(index,
浏览 0提问于2018-11-25得票数 0
面对此错误，无法从控制台进行调试：
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Main Bike Trails'.
at viewDebugError (core.es5.js:8418)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396)
浏览 38提问于2017-07-19得票数 0
回答已采纳
当订阅QueryList时，更改事件，以及响应事件和更改视图绑定的属性。我得到一个ExpressionChangedAfterItHasBeenCheckedError，这个值和旧值一样。
我做了一个stackblitz 显示错误。
我可以通过向队列中添加一个微任务来解决这个问题。但我只是想弄清楚到底发生了什么。
谢谢
浏览 0提问于2019-06-14得票数 1
回答已采纳
有这样一个错误：
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。先前的值：'ngTemplateOutlet: undefined‘。当前值：'ngTemplateOutlet: object Object‘。
在viewDebugError (core.js:9775)
在expressionChangedAfterItHasBeenCheckedError (core.js:9753)
在checkBindingNoChanges (core.js:9920)
在checkNoChangesNode
浏览 2提问于2018-07-04得票数 4
我试图访问ngOnit内部的rest，如下所示：
ngOnInit(): void {
this.myModel = new myModel ();
Observable.forkJoin(
this.myService.getdata(),
this.myService2.getData2(id)
).subscribe(
data => {
this.data1 = data[0];
this.data2 = data[1];
},
浏览 1提问于2017-10-10得票数 6
2回答
我正在尝试更新芯片的选定属性，但更改绑定属性时会出现ExpressionChangedAfterItHasBeenCheckedError错误
HTML
<mat-chip-list>
<mat-chip *ngFor="let w of weekDays" [selectable]="true" color="accent" selected="{{w.value}}" (click)="toggleValue(w)">
{{w.text}}
浏览 0提问于2017-11-22得票数 2
回答已采纳
这是一个
@Component({
selector: 'my-app',
template: `
<div>
<h1>{{ foo }}</h1>
<bpp [(foo)]="foo"></bpp>
</div>
`,
})
export class App {
foo;
}
@Component({
selector: 'bpp',
template: `
<div>
浏览 1提问于2017-09-06得票数 5
回答已采纳
我有一个包含内容的子视图 export class ChildViewComponent implements OnInit {
@Input() loading = true;
} 和父组件，如 export class ParentViewComponent implements OnInit {
loading = true;
getList() {
this.myService.getList().subscribe(() => {
this.loading = false;
});
}
} 和parent-view.compone
浏览 11提问于2019-12-31得票数 1
回答已采纳
我正在编写一个组件，它接受一个@Input参数，并将其显示在错误下面的html位中。
SuggestionsComponent.html:54 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '<p>so string value</p>
'.
at viewDebugError (cor
浏览 1提问于2018-06-23得票数 0
我正在尝试解决我在Kendo UI datepicker控件上遇到的问题。当我点击日历图标打开带有日期的弹出窗口时，我会得到一个ExpressionChangedAfterItHasBeenCheckedError异常。此外，该控件显示日期的方式与Kendo UI演示中的不同，并且我无法在选择日期时更改value属性。是否有关于何时解决此问题的更新？
浏览 0提问于2017-06-30得票数 0
2回答
组件加载动态时的错误
DynamicBuilderComponent.ngfactory.js:198错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的价值：“ng-原始:真”。现值：“ng-原始:假”。
问题
after binding json in select2data to select2 component Angular throw exception.
组件代码
@Component({
changeDetection: ChangeDe
浏览 0提问于2019-08-09得票数 1
目前，当延迟加载事件时，我会得到一个异常。我跟着
异常
AppComponent.html:4 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object],[object Object],[object Object],[object Object],[object Object]'.
at vie
浏览 0提问于2018-04-17得票数 1
回答已采纳
我被这个错误弄糊涂了，我有ExpressionChangedAfterItHasBeenCheckedError错误，我试图理解ngAfterContentInit，但我不确定如何在我的情况下使用它，如果有人能让我知道为什么会发生这个问题。_state用于防止循环调用。
private password_disabled: any;
private sudo: any;
private locked: any;
private password_disabled_state = false;
private sudo_state = false;
private loc
浏览 0提问于2018-04-08得票数 0
我不知道我在这里错过了什么。
SharedServiceA:
export class SharedServiceA {
somethingWasUpdated = new Subject();
updateSomething(value) {
this.somethingWasUpdated.next(value);
}
}
AnotherService:
export class AnotherService {
doSomething() {
this.sharedServiceA.updateSomething(true
浏览 0提问于2020-06-19得票数 0
我有一个错误ExpressionChangedAfterItHasBeenCheckedError。普伦克：http://plnkr.co/edit/XKfHDAzuhjAhVvbQOpsW?p=preview
我找到一个解释：
https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked
但是，我不知道如何在没有setTimeout的情况下对这个问题作出正确的修正。
问题在于this.message变量。+与ngAfterViewChecked有相同的问题。没有Behavior
浏览 5提问于2017-07-19得票数 1
回答已采纳
在我的网站中，当用户在页面中滚动时，徽标会旋转。 代码非常基础： 组件 @HostListener('window:scroll', ['$event'])
scrollPos(){
if (typeof window !== 'undefined') {
return Math.round(window.scrollY);
}
} HTML <img src="assets/logo.svg" [ngStyle]="{ transform: 'rotate(' + scrollPo
浏览 26提问于2020-12-16得票数 1
回答已采纳
1回答
当完成调试模式(即ng build )时，在某些组件中出现以下错误。但是，一旦我改变构建模式，使用ng build - prod 进行prod，这些错误就会消失。
我不清楚为什么会发生这种情况。
错误： ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改
谢谢
浏览 0提问于2019-01-30得票数 0
回答已采纳
2回答
我正在尝试以角度动态加载图像，这样就没有图像缓存。但是，我在控制台中看到了这个错误，当我尝试使用以下角度时：
ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked.
Previous value for 'src': 'assets/my-image.svg?1662363097161'.
Current value: 'assets/my-image.svg?1662363097162
浏览 19提问于2022-09-05得票数 1
回答已采纳
我更新了Angular 2项目到Angular 4。我正在使用管道，如下所示。
<input type="text" class="form-control" [ngModel]="customerSearchText | isnumber" (ngModelChange)="customerSearchText=$event">
customerSearchText声明
public customerSearchText: number;
isnumber.pipe
@Pipe({ name: 'isnum
浏览 0提问于2017-11-15得票数 2
请参阅以下plunker 我希望在呈现选项卡之后能够选择选项卡，但是我得到了一个错误的ExpressionChangedAfterItHasBeenCheckedError。如果此特定路由具有ID值，则加载实体，然后选择详细信息选项卡。 ngAfterViewInit() {
let id = this.route.snapshot.params['id'];
if(null!=id) {
this.loadEntity(id);
this.tabs.select('detail');
}
}
浏览 6提问于2019-06-12得票数 0
回答已采纳
2回答
这是我的灵感来源：
get diff(): number {
if (this.budgetTotalDiffList) {
return this.budgetTotalDiffList.reduce((a, b) => (a ? Number(a) : 0 + b ? Number(b) : 0), 0);
}
}
这是我的父HTML：
<td>
<p>{{diff}}</p>
</td>
我有一个子组件来向父getter发出budgetTotalDiffList：
this.budge
浏览 3提问于2019-11-15得票数 0
回答已采纳
我用最少的代码在上复制了这个问题。
步骤1:单击文本
第2步:关注文本字段
步骤3:键入enter并检查控制台是否存在此错误
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的价值：“ng-未触及:真”。现值：“ng-未触及:假”。
浏览 2提问于2019-07-04得票数 16
回答已采纳
我有一个很大的疑问，第一种情况会产生一个错误，但是如果我替换第二种情况就不会失败。 案例1： <div class="col-8" *ngIf="customstreetType">
<app-input-text
[valueIn]="_address?.custom_street_type"
(valueOut)="_address.custom_street_type = $event; change()"
></app-input-text>
浏览 78提问于2019-05-27得票数 1
我的angular6项目中有这个控制台错误: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression在检查后发生了更改。上一个值：'flag：‘。当前值：'flag: null‘。 这是ts组件子组件中的代码 @Input() flag: any; 这是html组件子级中的代码。 <div *ngIf="flag !== 'ABBONAMENTO_MDA'">
<div class="form-group col-lg-3 col-md-3&
浏览 17提问于2020-06-29得票数 0
我使用Angular 11，并使用BehaviorSubject从完全不同的组件更新工具栏。工具栏按如下方式订阅BehaviorSubject： <breadcrumbs [crumbs]="messageService.getBreadcrumbs() | async"></breadcrumbs> messageService对象从子组件中调用，并且可以随时更新工具栏。但我得到的错误是： core.js:6210 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Ex
浏览 17提问于2021-08-20得票数 0
回答已采纳
1回答
我正在构建自己的表单控件。在字段循环中，我将FormControls添加到FormGroup中。但是，当我试图定义验证器组合时，它会抛出ExpressionChangedAfterItHasBeenCheckedError。
下面是示例应用程序。打开控制台。使用Validators.compose([Validators.required])，all工作。
浏览 0提问于2018-07-13得票数 1
回答已采纳
我有一个非常简单的设置。我在app.component.html中有一个输入字段，用户可以在其中输入一个字符串。我正在将该字符串添加到Map<string，number>中。我把那个映射传递给子组件。我使用@ and ()访问子组件中的映射，并对其进行迭代并显示子组件中的值。
app.component.html ->父组件
<div class="shopping-cart">
<app-shopping-cart-item [shoppingItems]="shoppingItems"></app-sh
浏览 4提问于2020-09-29得票数 1
回答已采纳
我正在构建我自己的PaginatorComponent。我需要将这个PaginatorComponent封装在我自己的、基于应用程序的MyPaginatorComponent中。我得到了ExpressionChangedAfterItHasBeenCheckedError，我不知道如何修复它。
下面是stackblitz复制：
有人能帮忙吗？
浏览 0提问于2018-06-26得票数 0
回答已采纳
2回答
只有在选中以下选项卡内容时，我才试图显示选项卡内容：
<mat-tab label="contacts">
<p-contacts [contacts]="selectedPanel.contacts"
*ngIf="tabGroup.selectedIndex === 1">
</p-contacts>
</mat-tab>
这是工作，但我有ERROR Error: Ex
浏览 2提问于2019-05-24得票数 7
回答已采纳
我们目前正在将Angular 4应用程序升级到版本6。我们将我们的应用程序配置为在使用JIT编译时在prod模式下运行，因为它有第三方图表组件，这些组件在自己的计时器上运行，这导致了DEV中偶尔不可避免的ExpressionChangedAfterItHasBeenCheckedError。这些错误没有影响生产。
由于某些原因，main.ts文件确实在Angular 4中执行，但在版本6中不能。
使用JIT编译在生产模式下运行Angular 6应用程序的最佳方式是什么？
谢谢!
浏览 0提问于2018-11-05得票数 1
我有一个带有布尔变量的Angular 4组件。初始值取决于输入流。
TypeScript要求我声明变量，如下例所示。如果没有它，this.isLoading将触发一个错误。
在这一点上，我还不知道它的值，所以我只是声明它，而不赋值一个变量。
export class SomeComponent implements OnInit {
@Input() someStream$;
isLoading: boolean;
ngOnInit() {
someStream.subscribe((someData) => {
// Code to determine
浏览 0提问于2017-10-20得票数 2
在我的angular应用程序中，我有一个DIV，我正在根据DIV中显示的内容设置属性scrollTop。我在里面有一个角度数据表，当没有值的时候，它的默认高度是36。我想在单击按钮时重置为默认高度，该按钮可将值重置为零。
我得到一个错误: ExpressionChangedAfterItHasBeenCheckedError: Expression在被检查后发生了变化。上一个值：'224‘。当前值：'46‘。
<div #scrollMe [scrollTop]="scrollMe.scrollHeight">
<data-table [
浏览 0提问于2018-12-22得票数 0
当对话打开时，我在chatView模板中使用scrollMe将聊天消息滚动到最近的消息。 当我第一次打开对话时，它就像一个护身符。但是，如果我多次打开同一对话，则会收到有关scrollTop的ExpressionChangedAfterItHasBeenCheckedError错误 例如，Previous value: 'scrollTop: 1152'. Current value: 'scrollTop: 576'.。 以下是模板： 打开对话时，aConversationWasOpened被初始化为1，同时messageList被填充。 <div *
浏览 8提问于2019-09-11得票数 0
1回答
从angular开始，我面临着以下困难:我必须将数据从子路由组件传递到父组件。 我想我可以使用带有eventEmitter的@Output。但我觉得这是不可能的，我还尝试使用一个会生成更改检测错误( ExpressionChangedAfterItHasBeenCheckedError)的主题。 子组件的ts： ngOnInit(): void {
this.itemsMenu = this.rayonService.itemsMenu;
this.activatedRoute.paramMap.subscribe(params => {
let para
浏览 21提问于2021-07-28得票数 0
我尝试过从堆栈溢出中得到一些答案，但没有结果：
模板是：
<div class="overlay" *ngIf="isLoading() | async">
代码：
@Injectable({
providedIn: 'root',
})
export class LoaderService {
public countRequests = 0;
private loading = new BehaviorSubject(false);
get isLoading(): Observable<b
浏览 3提问于2020-07-08得票数 0
回答已采纳
在我的ionic 4应用程序中，我正在从我的firebase数据库中读取时间戳，并尝试以ion-datetime元素的格式显示它。 页面加载并显示ok，但我的ion-datetime字段为空，并且收到以下错误： ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous
value: 'model: undefined'. Current value: 'model: Invalid Date'.
at viewD
浏览 21提问于2019-12-24得票数 0
我让我的HTTP拦截器在每次发出HTTP请求时打开加载栏：
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const dataStorageService = this.injector.get(DataStorageService);
dataStorageService.openProgressbar.next(true);
return next
.handle(req)
.do(
浏览 3提问于2018-01-26得票数 0
回答已采纳
角2/ Angular 5中的ExpressionChangedAfterItHasBeenCheckedError
错误信息：
错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的价值：“ng-未触及:真”。
现值：'ng-untouched: false'。
浏览 1提问于2018-06-15得票数 1
回答已采纳
我使用角9，我有父和子组件和服务，存储BehaviorSubject。所有组件都有OnPush策略。
父组件使用异步管道订阅该服务主题。
父组件包含子组件。
子组件在其生命周期开始时更改该服务主题(ngOnInit)
使用此步骤，父级将不会在子级更改可观察到的值后立即作出反应。这是可复制的。例如，在您将子输入的焦点集中之前，父级将不会被更新。
我已经调试了这个过程，并看到在异步管道执行tick之后调用了markForCheck函数。所以我不明白为何没有更新视图呢？我注意到，如果我将策略更改回Default，ExpressionChangedAfterItHasBeenChe
浏览 2提问于2020-05-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
