-1

I get the following error, when I click a button which I set to show and hide a form field. and I could not figure it out, how to resolve it

   ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'disabled: false'. Current value: 'disabled: true'.
at viewDebugError (core.js:20496)
at expressionChangedAfterItHasBeenCheckedError (core.js:20484)
Math
  • 399
  • 1
  • 6
  • 14
  • 1
    It's impossible to know why you have this error unless you add your component and template source code. This error usually occurs when you have async pipes in the template and you have intermittent state or you're emitting multiple values before the template is rendered. There is a detailed blog post here that explains more: https://blog.angular-university.io/angular-debugging/ – DrewT Jul 16 '20 at 05:08
  • 1
    Does this answer your question? [How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime](https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w) – Shabbir Dhangot Jul 16 '20 at 05:15

2 Answers2

0

Use ChangeDetectorRef from angular/core. Inside constructor

private _changeRef:ChangeDetectorRef

And inside ngDoCheck lifecycle call markForCheck

ngDoCheck() {
this._changeRef.markForCheck()
}
user3802184
  • 29
  • 1
  • 6
0

Try below code it should solve your problem:

import the ChangeDetectorRef in your component Read here for details

(https://angular.io/api/core/AfterViewChecked)

import { Component, OnInit, ChangeDetectorRef} from '@angular/core';

constructor(private _changeDetRef: ChangeDetectorRef){}
   ngAfterViewChecked(){

    //console.log('----detect change-----');
    this._changeDetRef.detectChanges();
   }
MJ X
  • 8,506
  • 12
  • 74
  • 99