从使用 snapshotChanges 订阅的 AngularFirestoreCollection 中删除一个项目，然后导航到集合路由会返回重复的项目答案

【问题标题】：Removing an item from an AngularFirestoreCollection subscribed with snapshotChanges then navigating to the collection route returns duplicate items从使用 snapshotChanges 订阅的 AngularFirestoreCollection 中删除一个项目，然后导航到集合路由会返回重复的项目
【发布时间】：2018-11-21 23:30:06
【问题描述】：

我有 a small list management example application 由两个 Angular 6 组件和一个服务组成：

ShapeListComponent

形状列表，每个形状都有一个编辑按钮，从 Cloud Firestore 集合中读取，通过 AngularFirestoreCollection 调用上的 snapshotChanges() 调用订阅并保存在 rxjs 可观察对象中。

ShapeEditComponent

每个形状的编辑页面，允许更新名称或从集合中删除形状。编辑、删除或更新形状后，用户将导航回形状列表路径。

ShapeService

包装对 AngularFire 的调用。

问题

删除项目的行为不像我预期的那样。在被路由回列表时，删除的项目仍然存在，并且列表中删除项目之后的每个项目都是重复的。

但是，Firebase 控制台中可见的文档数据已正确删除，并且不会出现重复项。

是否有人能够阐明我将 AngularFire 与 Cloud Firestore 和 rxjs 一起使用的方法是否存在缺陷，或者这是否应该正常工作？

复制步骤

创建一个新的 Firebase 项目
设置数据库功能（在测试模式下选择 Cloud Firestore Beta）
在您的 firebase 项目设置中，选择“将 Firebase 添加到您的网络应用程序”并将包含您的连接信息的 js 复制到剪贴板（忽略初始化应用程序的最后一行，因为这是在下面的模块声明中完成的）。
```
// Initialise Firebase
var config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "..."
};
```
Go to the stackblitz example I've created 和app.module.ts 中替换相同的sn-p，将config 变量重命名为firebaseConfig
添加一些形状
编辑列表中的第一个形状并点击“删除”按钮。
结果列表包含上述重复项。

其他说明

当列表组件中包含删除功能时（并且未完成路由器导航），不会观察到相同的问题行为。（See this example which behaves correctly - 还需要指向您的 Firebase Cloud Firestore 项目）

【问题讨论】：

标签： angular typescript firebase google-cloud-firestore angularfire2

【解决方案1】：

我遇到了一个类似的问题，我依靠snapshotChanges observable 中的shareReplay(1) 运算符“解决”了这个问题：

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

我承认我还没有弄清楚为什么会出现这个问题，而且我对黑客攻击并不满意。切换到valueChanges()（因此丢失了 ID）也消除了重复项。

【讨论】：