使用 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);
    });