Реализовать автосохранение в базу данных Firestore при использовании угловых реактивных форм

Question

У меня есть приложение Angular, в котором данные формы должны быть сохранены (и обновлены) из базы данных Firestore более или менее мгновенно, поскольку 1) несколько человек будут вводить данные в одной форме, 2) другие пользователибудет использовать значения в реальном времени в другой части приложения, и 3) данные должны быть сохранены в случае сбоя питания или интернета.

Я использую реактивные формы, и я попытался сохранить значения форм, подписавшись на изменения формы, а также запустив отдельные изменения в keyup.По большей части, это работает нормально, но иногда данные теряются.

Например, допустим, я что-то ввожу в поле (например, 123456789).Вот что иногда случается:

• Когда я печатаю, '1234' сохраняется в базе данных
• Я продолжаю печатать '567'
• Как только 1234обновляется в базе данных, она отправляется в valueChanges наблюдаемого документа
• Форма исправляется с помощью '1234'
• Я продолжаю вводить '89'
• Значение во вводетеперь «123489» (отбрасывая 567, так как он потерян, когда произошло обновление)

Есть ли хороший способ справиться с этим?Я пытался использовать debounceTime, но это усугубляет проблему задержки.

У меня есть пример стекаблика, где я моделирую проблему задержки базы данных пожарного хранилища (https://stackblitz.com/edit/immediate-save?file=src/app/app.component.ts).

ps Я буду в порядке с удержанием сохранения до изменения фокуса (например, размытие или (изменение)), но я также хотел бы запустить сохранение, если курсор перестает печатать в поле, но не переводит наследующее поле

Answer 1

Как добавление времени отката усугубляет проблему задержки?Просто добавьте debounce в valueChanges lisener, а не в запрос к базе данных:

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