Angular 复选框仅以一种方式与 Firestore 文档绑定答案

【问题标题】：Angular checkbox only binds one way with Firestore docAngular 复选框仅以一种方式与 Firestore 文档绑定
【发布时间】：2020-07-28 21:18:18
【问题描述】：

我有一个带有布尔字段的 Firestore 文档，我想将其绑定到复选框。这就是我正在做的绑定：

获取组件中的observable：

this.doc$ = await this.afs.collection('docs').doc<Doc>(docId).valueChanges()

在模板中使用 observable：

<div *ngIf="doc$ | async as doc;">
  <input type="checkbox" [(ngModel)]="doc.checkValue">
</div>

如果我通过控制台更新 Firestore 上的文档，复选框会正确反映当前状态，但是当我更新复选框时，Firestore 文档不会更新。我认为这是首选方法，而不是使用检查，但这是错误的吗？

【问题讨论】：

标签： angular data-binding google-cloud-firestore observable

【解决方案1】：

如果我理解正确，只有valueChanges() Observable 被实现。根据documentation 是：

valueChanges()

这是什么？ - 返回文档数据的 Observable。所有快照元数据都被剥离。此方法仅提供数据。

你为什么要使用它？ - 当您只需要对象数据时。不附加了文档元数据，这使得渲染到查看。

你什么时候不使用它？ - 当您需要文档的 id 时使用数据处理方法。此方法假设您是将 id 保存到文档数据或使用“只读”方法。

您可以在相同的文档中找到关于 Manipulating documents 的部分。

所以实现了监听器，当数据库中出现更改时更新复选框，现在，我想，应该已经实现了功能，当复选框值更改时更新数据库。

希望对你有帮助！

【讨论】：

感谢 vitooh 的信息。我尝试将 valueChanges 更改为 snapshotChanges，但这仍然是相同的：从 Firestore 控制台对文档的直接更改会立即显示在模板中，但模板的更改不会传播回 Firestore。这是我使用的代码：this.doc$ = this._afs.collection('docs').doc<Doc>(docId).snapshotChanges().pipe(map(a => {return a.payload.data();}))

【解决方案2】：

由于它没有使用 snapshotChanges() 而不是 valueChanges() 直接从模板更新，所以我只是进行了结束运行并使用模板更改事件通过添加到组件的函数将更新推送到 Firestore：

在模板中：

(change)="onCheckChange(doc)

在组件中：

onCheckChange(doc: Doc) {
this.afs.collection('docs').doc(doc.docId).update({ checkValue: doc.checkValue })
}

我认为这不是最好的方法，但我暂时被困住了，这至少让我继续前进。我仍然很想知道通过模板处理这个问题的正确方法是使用 AngularFire。不过感谢您的意见。

【讨论】：