签入 Angular/Ionic 应用程序后，复选框字段立即取消选中

Question

我有一系列数据在我的应用程序中循环。每个项目都包含字段checked，表示是否应选中该项目的复选框。默认情况下，在我的list.html 文件中设置为checked: false。

<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>

在更改使用ionChange 选中的复选框时，我调用我的itemChecked 方法将我的item 传递给它。

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

然后，在我的firestore 服务文件中，我像这样更新文档：

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

但是，回到我的 list.html 文件中，该项目没有被检查，并且我的 firebase 数据库中没有任何内容被正确更新？该项目很快显示为已选中，然后立即恢复为未选中。

对于我可能忽略或错误操作导致此问题的任何想法？

Answer 1

我认为您应该使用[checked]="item.checked" 而不是[(ngModel)]="item.checked"，而在itemChecked() 中使用item.checked = !item.checked，因为您想用新值更新[checked] 绑定。当然，你也应该处理 ionChange 的 checked==false 结果。