使用 Angular Reactive Forms 时实现自动保存到 Firestore 数据库

Question

我有一个 Angular 应用程序，其中表单中的数据需要或多或少地立即保存到（并从）Firestore 数据库更新，因为 1）多人将在同一个表单上输入数据，2）其他用户将在应用程序的另一部分使用实时值，以及 3) 数据需要在电源或互联网故障的情况下保存。

我正在使用响应式表单，并且我尝试通过订阅表单更改以及触发 keyup 上的单个更改来保存表单值。 大多数情况下，它工作正常，但有时数据会丢失。

例如，假设我在字段中输入了一些内容（例如 123456789）。 以下是有时会发生的情况：

• 当我输入时，'1234' 被保存到数据库中
• 我继续输入“567”
• 一旦 1234 在数据库中更新，它就会被发送到文档的 valueChanges observable
• 表单被“1234”打上补丁
• 我继续输入“89”
• 输入中的值现在是“123489”（丢弃 567，因为更新发生时丢失了）

有没有好的方法来处理这个问题？ 我曾尝试使用 debounceTime，但这会加剧延迟问题。

我有一个示例 stackblitz，我在其中模拟了 Firestore 数据库延迟问题（ https://stackblitz.com/edit/immediate-save?file=src/app/app.component.ts ）。

ps 我可以在焦点改变（例如模糊或（改变））之前推迟保存，但如果光标停止在字段中输入，但我也想触发保存，但没有标签到下一个字段

Answer 1

添加去抖时间如何加剧延迟问题？ 只需在 valueChanges lisener 上添加 debounce，而不是数据库请求：

  this.controls.valueChanges
    .pipe(
      debounceTime(500)
    )
    .subscribe(person=>{
      console.log(person);
      this.dataSvc.updatePerson(person);
    });