Удаление элемента из коллекции AngularFirestoreCollection, подписанной с snapshotChanges, затем переход к маршруту сбора возвращает дублированные элементы

Question

У меня есть пример приложения для управления небольшим списком , состоящий из двух компонентов Angular 6 и службы:

ShapeListComponent

Список фигуркаждая с кнопкой редактирования, которая считывается из коллекции Cloud Firestore, подписывается с помощью вызова snapshotChanges () на вызов AngularFirestoreCollection и удерживается в наблюдаемой rxjs.

ShapeEditComponent

Страница редактирования для каждой фигуры, которая позволяет обновить имя или удалить фигуру из коллекции.После редактирования, удаления или обновления фигуры пользователь возвращается к маршруту списка фигур.

ShapeService

Перенос вызовов в AngularFire.

Проблема

Удаление элемента ведет себя не так, как я ожидаю.После перенаправления обратно в список удаленный элемент все еще там, и каждый элемент после удаленного элемента в списке дублируется.

Однако данные документа, видимые в консоли Firebase, удаляются правильно, и нетдубликаты появляются.

Кто-нибудь может пролить свет на то, является ли мой подход к использованию AngularFire с Cloud Firestore и rxjs ошибочным, или это должно работать правильно?

Шаги для воспроизведения

1. Создание нового проекта Firebase
2. Настройка функции базы данных (выбор бета-версии Cloud Firestore в тестовом режиме)

3. В настройках проекта Firebase выберите «Добавить»Firebase к вашему веб-приложению »и скопируйте в буфер обмена файлы js, содержащие информацию о вашем соединении (игнорируя последнюю строку, которая инициализирует приложение, как это сделано в описании модуля ниже).

   // Initialise Firebase
   var config = {
     apiKey: "...",
     authDomain: "...",
     databaseURL: "...",
     projectId: "...",
     storageBucket: "...",
     messagingSenderId: "..."
   };
   

4. Перейдите к примеру со стеком, который я создал , и в app.module.ts замените тот же фрагмент, переименовав переменную config в firebaseConfig

5. Добавьте несколько фигур
6. Отредактируйте первую фигуру в списке и нажмите кнопку «Удалить».
7. Полученный список содержит вышеупомянутые дубликаты.

Другие примечания

СэмПроблемное поведение НЕ наблюдается, когда функция удаления включена в компонент списка (и не выполняется навигация по маршрутизатору).( См. Этот пример, который ведет себя правильно - также необходимо указать на ваш проект Firebase Cloud Firestore)

Answer 1

Я столкнулся с аналогичной проблемой, которую я "решил", полагаясь на оператор shareReplay(1) в snapshotChanges наблюдаемом:

this.shapes$ = this.shapes.snapshotChanges().pipe((shareReplay(1), map(actions => {
  return actions.map(action => ({key: action.payload.doc.id, ...action.payload.doc.data()})));
});

Признаюсь, я не понял почему проблема возникает, и я не доволен взломом.Переключение на valueChanges() (и, следовательно, потеря идентификатора) также избавило от дубликатов.