Angularfire: Items disappear when deleting an item from a limited list

[diegotham]

Version info

Angular:: 4.3.4

Firebase: 4.6.0

AngularFire: 5.0.0-rc.4

It also happens with Angular 5.0.2 && firebase 4.6.2, but the Stackblitz provided runs those versions

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

https://stackblitz.com/edit/angular-yhbuma

Image:

Steps to set up and reproduce

1. Fork the Stackblitz
2. Put your firebase details into app.module.ts
3. Add items clicking the bottom "Add new item" until the quantity is enough to pass the page limit
4. Start deleting items

The items get deleted, but the rest of the list starts to disappear (not being deleted though).

Debug output

* Errors in the JavaScript console *
No errors in the console.

Expected behavior

The item I choose to delete is deleted, and the list is updated with the same number of items determined by the pageLimit.

Actual behavior

The items of the list start to disappear randomly. If you delete cache/cookies or use incognito, the items are retrieved normally, unless you delete again an item.

[diegotham]

The previous example works If I use the async pipe instead of subscribing. But it fails again in the same way if I add another query to the same path, but this time to count the total items.

Here is the Stackblitz: https://stackblitz.com/edit/angular-fl45ty

[davideast]

@diegotham Thank you so much for the detailed bug with the Stackblitz! This made it so much easier to troubleshoot.

This is a tricky bug, but I'm on the case. I'll get back to you as soon as I have more information.

[thongnx6]

@diegotham I have the same problem. Then I read document as below https://firebase.google.com/docs/firestore/manage-data/delete-data ,and I try this.afs.collection('categories').doc(pathOfdoc).delete();, this works.
So, I using is .snapshotChanges()It returns an array with a lot more information. Then you can use a map operator to get the data and the object Id from the array.

[marcosseki]

Hey guys, any news about this issue?

[ckouassi]

Hello everyone, is this issue has been resolved ?

[YamanSehzade]

Hi @davideast, any news about this issue?

[jamesdaniels]

This is due to multiple subscribes on a valueChanges + everything gltiching our with multiple listeners and conflicting data, you'll need to lean on rxjs more. If you update your stackblitz with project credentials, I'll fork and show you a fix.