Question

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

ShapeListComponent

一个形状列表，每个形状都有一个从Cloud Firestore集合中读取的编辑按钮，通过对AngularFirestoreCollection调用的snapshotChanges（）调用进行订阅，并保存在rxjs observable中。

ShapeEditComponent

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

ShapeService

包含对AngularFire的调用。

问题

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

但是，Firebase控制台中显示的文档数据会被正确删除，并且不会显示重复项。

是否有人能够了解我使用AngularFire与Cloud Firestore和rxjs的方法是否有缺陷，或者这是否正常？

重现步骤

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

其他笔记

当列表组件中包含删除功能（并且没有完成路由器导航）时，未观察到相同的问题行为。（See this example which behaves correctly - 还需要指向您的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()（从而丢失ID）也摆脱了重复项。

从使用snapshotChanges订阅的AngularFirestoreCollection中删除项目，然后导航到收集路由将返回重复的项目

1 个答案: