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

Question

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

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

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

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

是否有解决此问题的好方法？我尝试使用debounceTime，但是这种情况加剧了延迟问题。

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

p.s。我可以推迟保存，直到焦点发生变化（例如模糊或（更改）），但是我也想触发一次保存，如果光标停止在一个字段中键入但不跳到下一个字段

Answer 1

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

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