1

我有一个 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 我可以推迟保存直到焦点改变（例如模糊或（更改）），但如果光标停止在字段中输入，但我也想触发保存，但没有选项卡到下一个字段

4

1 回答 1

0

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

  this.controls.valueChanges
    .pipe(
      debounceTime(500)
    )
    .subscribe(person=>{
      console.log(person);
      this.dataSvc.updatePerson(person);
    });
于 2019-01-31T00:43:01.893 回答