Understanding the "Expression has changed after it was checked" error

I am receiving an error when trying to update the value of an item in my app.

This is the error:

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

In my project, I have a list of items:

<ion-item-sliding *ngFor="let item of items" [id]="'item-' + item.id">
    <ion-item lines="full">
          <ion-label [class.strike]="item.checked" class="ion-padding ion-text-wrap">
                {{ item.title }}
           </ion-label>
           <ion-checkbox slot="start" [checked]="item.checked" mode="ios" (ionChange)="itemChecked(item)"></ion-checkbox>
    </ion-item>
    <ion-item-options side="end">
          <ion-item-option (click)="move(item)">Move</ion-item-option>
     </ion-item-options>
</ion-item-sliding>

In my move method, I attempt to set the values like this, before saving in my database:

async move(item: Item) {
    item.location = 'history'; //No issues with this
    item.checked = false; //Throws above error
    await this.firestore.updateItem(item);
}

No errors are thrown if I just update the location, but as soon as I attempt to update the checked in the item, then it throws the error above?

Any thoughts on what may be causing this error and what I could look at to try and correct the issue?

4 posts - 2 participants

Read full topic