Checkbox field immediately gets unchecked after checking in Angular/Ionic app

Issue

I have a series of data that I am looping through in my app. Each item contains the field checked that represents whether or not the checkbox for that item should be checked. By default, that is set to checked: false in my list.html file.

<ion-item lines="full" *ngFor="let item of items">
    <ion-label [class.strike]="item.checked" class="ion-padding ion-text-wrap">
        {{ item.title }}
    </ion-label>
    <ion-checkbox slot="start" [(ngModel)]="item.checked" mode="ios" (ionChange)="itemChecked(item)"></ion-checkbox>
</ion-item>

On change of the checkbox being selected using the ionChange, I call my itemChecked method pass my item to it.

async itemChecked(item: Item) {
    console.log(item); //I can see checked has been updated.
    await this.firestore.updateItemKey(item, 'checked');
}

Then, in my firestore service file, I update the document like so:

updateItemKey(item: Item, key: string) {
    const itemDocRef = doc(this.firestore, `items/${item.id}`);
    return updateDoc(itemDocRef, { key: item[key] });
}

However, back in my list.html file, the item is not being checked and nothing is being correctly updated in my firebase database? The item quickly shows as checked then immediately goes back to unchecked.

Any thoughts on what I may have overlooked or done incorrectly that is causing this issue?

Solution

Instead of [(ngModel)]="item.checked" I think you should just go with [checked]="item.checked", and in itemChecked() do item.checked = !item.checked because you'd want to update the [checked] binding with new value. Of course, you should handle checked==false result of ionChange too.

Answered By - Misha Mashina