ExpressionChangedAfterItHasBeenCheckedError

[xiehongyang]

my html:

 <select2
              [data]="envData"
              [options]="envOptions"
              [width]="300"
            ></select2>

my component:

envData: Array<Object> = [];
 envOptions: Select2Options = {
    multiple: true
  };

after I select one or more options, then I change data of envData, Chrome would console this:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. at viewDebugError (core.es5.js:8633) [angular] at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8611) [angular] at checkBindingNoChanges (core.es5.js:8775) [angular] at checkNoChangesNodeInline (core.es5.js:12329) [angular] at checkNoChangesNode (core.es5.js:12303) [angular] at debugCheckNoChangesNode (core.es5.js:12922) [angular] at debugCheckDirectivesFn (core.es5.js:12824) [angular] at Object.View_ProjectRedisAssignment_4.co [as updateDirectives] (ProjectRedisAssignment.html:124) [angular] at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806) [angular] at checkNoChangesView (core.es5.js:12123) [angular] at callWithDebugContext (core.es5.js:13206) [angular] at Object.debugCheckNoChangesView [as checkNoChangesView] (core.es5.js:12753) [angular] at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.checkNoChanges (core.es5.js:10222) [angular]

is there something wrong with my code? thank u~!

[gergelybodor]

This is because you are changing the data that you are binding to a template element after said template has been checked by angular. I believe this is not going to cause problems in production, but in development angular throws this error message rightly so. There are ways to prevent it, but because your code is not available, I can't really give any good advice.

What you can do to go around this problem is inject ChangeDetectorRef in your component's constructor, and implement AfterViewChecked or AfterContentChecked and in there call ChangeDetectorRef's detectChanges() method.

export class YourComponent implements AfterViewChecked {

  constructor(private ref: ChangeDetectorRef) { }

  ngAfterViewChecked(): void {
    this.ref.detectChanges();
  }
} 

[xiehongyang]

@bgolyoo Thanks for your answer~！I will try :+1:

[xiehongyang]

Sorry I am too dull to understand usage of ChangeDetectorRef, still met this error, I will tell u my code more specific: I have a dropdown list in my html

 <select class="form-control" [(ngModel)]="envModel" (change)="changeEnvMode()">
              <option>online</option>
              <option>offline</option>
 </select>


<select2 [data]="envData"></select2>

and in component:

changeEnvMode() {  // yes, here I change the select's option
    this.envDataInit();  //  trigger select2's change
  }
envDataInit() {
    let temArray: Array<Select2OptionData> = [];
    if (this.envModel === 'offline') {
      this.envList.forEach(item => {
        if (item.indexOf('qa') !== -1 || item.indexOf('test') !== -1 || item.indexOf('uat') !== -1) {
          temArray.push({
            id: item,
            text: item
          })
        }
      })
    } else {
      this.envList.forEach(item => {
        if (item.indexOf('stage') !== -1 || item.indexOf('product') !== -1) {
          temArray.push({
            id: item,
            text: item
          })
        }
      })
    }
    this.envData = temArray; // here, I replace the old array to new array, and error comes
   // so, do u mean I should insert ` this.ref.detectChanges();` here? 
  //  because I want trigger angular checking manually in here  I tried, but it doesn't work
  }

Could u give me any suggestion? So much Thanks, my poor English, If u don't know what I have written, just ask :)

[gergelybodor]

Just do this in your component:

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

@Component( ... )
export class YourComponent implements AfterViewChecked {

  constructor(private ref: ChangeDetectorRef) { }

  ngAfterViewChecked(): void {
    this.ref.detectChanges();
  }
  
  ...

  changeEnvMode() { ... }

  envDataInit() { ... }
} 

If you still get the error, replace ngAfterViewChecked with AfterContentChecked.

[xiehongyang]

So sorry, I add both of them, but still doesn't work : (

ngAfterContentChecked(): void {
    this.ref.detectChanges();
  }

  ngAfterViewChecked(): void {
    this.ref.detectChanges();
  }

[logeshthedev]

I could not see Select2Options in the library. Could you please help me out?

[xiehongyang]

@logeshthedev Sorry. What do u mean in the library

[logeshthedev]

Sorry it was my bad.. I am able to access to select2options..

On another note, could you let me Know on how to do ngModel? Is this supported in this library??

[xiehongyang]

a ha : ( I am not sure whether u can use ngModel in here... Maybe u can others for this, Sorry for that = =