Expression has changed after it was checked. Previous value:

Ionic Framework ionic-v3
1

Hi All,

I am getting the following error, what is the best way that I should handle it?

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '3m 18s'. Current value: '3m 19s'

I have a list iterating and for each object it calls a function to calculate the time last online. This works perfectly, but I have noticed each time there is screen activity it calls the function again, and updated the displayed time (pretty cool in that the time updates). Eventually it gets the above error.

html

  <ion-list>
    <ion-item-sliding *ngFor="let result of employeeModels">
      <ion-item>
        {{ formatEmployee(result) }}
        <ion-avatar item-left><img [src]="result.avatar64 ? result.avatar64 : 'images/blank-profile-picture.png'"></ion-avatar>
        <h2>{{result.firstName}}</h2>
        <p>{{result.categories[0].name}}&nbsp;{{result.subCategories[0].name}}&nbsp;{{result.time}}</p>
      </ion-item>
      <ion-item-options>
        <button primary>
          <ion-icon name="text"></ion-icon>
          Message
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

script

formatEmployee(employeeModel: Employee) {
if (employeeModel.avatar) {
employeeModel.avatar64 = decodeURIComponent(window.atob(employeeModel.avatar));
}
this.lastAccessDate(employeeModel);
}

lastAccessDate(employeeModel: Employee) {
//console.log(employeeModel.id+‘: ‘+new Date().getTime()+’ - ‘+employeeModel.lastAccessDate+’ = (’+(new Date().getTime()-employeeModel.lastAccessDate)+‘)’);
employeeModel.time = this.displayTime(employeeModel.lastAccessDate);
}

displayTime(lastAccessDate: number) {
var now: number = new Date().getTime();
var timeDiff: number = now - lastAccessDate;
timeDiff /= 1000;
var seconds = Math.round(timeDiff % 60);
timeDiff = Math.floor(timeDiff / 60);
var minutes = Math.round(timeDiff % 60);
timeDiff = Math.floor(timeDiff / 60);
var hours = Math.round(timeDiff % 24);
timeDiff = Math.floor(timeDiff / 24);
var days = Math.round(timeDiff % 7);
timeDiff = Math.floor(timeDiff / 7);
var weeks = timeDiff;

var returnString = weeks + "w " + days + "d";
if (weeks <= 0) {
  returnString = days + "d " + hours + "h";
  if (days <= 0) {
    returnString = hours + "h " + minutes + "m";
    if (hours <= 0) {
      returnString = minutes + "m " + seconds + "s";
      if (minutes <= 0) {
        returnString = seconds + "s";
      }
    }
  }
}

return returnString;

}

2

SOLVED

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
5 Likes
3

If I add the following, I no longer get the error:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value:

However, my page does load its data, i.e. calls the service, but it does not display the data in the DOM.

I had this method in the constructor, and moved it here with no success.

  ionViewLoaded() {
    this.getEmployeeRange();
  }

If I use changeDetection: ChangeDetectionStrategy.Default, the DOM gets loaded, but I get the Expression has changed error.

I have also tried to use the ChangeDetectionStrategy's markForCheck with no success (i.e. DOM not loaded):

  ionViewLoaded() {
    this.getEmployeeRange();
    this.ref.markForCheck();
  }

Any ideas would be appreciated.

1 Like
4

Here’s the answer (use this.ref.markForCheck(); in the Observable):

5

I know its a very old topic, but I need a help in this if anyone can do so.

I have a for loop in that I am doing a condition check. its basically a toggle for a ion-row to show or hide. initially it will be hidden meaning ngIf has a false value to it, but when I try to change it to true, I get a following error.

Any help will be appreciated.

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

I doubt anybody will be able to say anything constructive without seeing enough code to be able to replicate the problem.

7

Thank you :slightly_smiling_face: