title: Checkbox field immediately gets unchecked after checking in Angular/Ionic app
body: <p>I have a series of data that I am looping through in my app. Each item contains the field <code>checked</code> that represents whether or not the checkbox for that item should be checked. By default, that is set to <code>checked: false</code> in my <code>list.html</code> file.</p>
  <pre><code>&lt;ion-item lines=&quot;full&quot; *ngFor=&quot;let item of items&quot;&gt;
      &lt;ion-label [class.strike]=&quot;item.checked&quot; class=&quot;ion-padding ion-text-wrap&quot;&gt;
          {{ item.title }}
      &lt;/ion-label&gt;
      &lt;ion-checkbox slot=&quot;start&quot; [(ngModel)]=&quot;item.checked&quot; mode=&quot;ios&quot; (ionChange)=&quot;itemChecked(item)&quot;&gt;&lt;/ion-checkbox&gt;
  &lt;/ion-item&gt;
  </code></pre>
  <p>On change of the checkbox being selected using the <code>ionChange</code>, I call my <code>itemChecked</code> method pass my <code>item</code> to it.</p>
  <pre><code>async itemChecked(item: Item) {
      console.log(item); //I can see checked has been updated.
      await this.firestore.updateItemKey(item, 'checked');
  }
  </code></pre>
  <p>Then, in my <code>firestore</code> service file, I update the document like so:</p>
  <pre><code>updateItemKey(item: Item, key: string) {
      const itemDocRef = doc(this.firestore, `items/${item.id}`);
      return updateDoc(itemDocRef, { key: item[key] });
  }
  </code></pre>
  <p>However, back in my <code>list.html</code> 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.</p>
  <p>Any thoughts on what I may have overlooked or done incorrectly that is causing this issue?</p>