AngularFire 2 "child_added" Returning All Childs
I'm having difficulties in understanding the "child_added"
from angularfire2.
According to the documentation, the "child_added"
, should return all children the first time, and then listen only for new children added to that particular db node.
With my code, the first time I get all children as expected. The problem is when I add a new child to the userinfo
node, I still get all the children (including the newly added).
Does this mean that the "child_added"
is actually downloading all the children every time a new child is added?
My db structure
.ts code (relevant part)
ngOnInit(){
this.userService.getUsers().snapshotChanges(['child_added'])
.subscribe(users => {
users.forEach(user=> {
console.log(user.key)
})
})
}
The service (relevant part)
constructor(private firebaseApp: AngularFireDatabase) {}
getUsers(){
return this.firebaseApp.list('userinfo/')
}
Thank you in advance
Answer
Since you're returning a new list every time getUsers
is called, the child_added
event will fire on each user in that list.
If you want to only fire all users the first time and after that get changes, you should probably create the list only once and return it from there on:
var usersList;
constructor(private firebaseApp: AngularFireDatabase) {}
getUsers(){
if (!this.usersList) {
this.usersList = this.firebaseApp.list('userinfo/')
}
return this.usersList;
}
Related Questions
- → How can I query Firebase for an equalTo boolean parameter?
- → How can I access nested data in Firebase with React?
- → Firebase simple blog (confused with security rules)
- → Removing item in Firebase with React, re-render returns item undefined
- → AngularJS Unknown Provider Error (Firebase & AngularFire)
- → How do you pass top level component state down to Routes using react-router?
- → "this" is null in firebase query function in reactjs
- → Angular Module Failed to Load
- → Multiple dex files define Lcom/google/android/gms/internal/zzrx;
- → Joining Firebase tables in React
- → How can I make add firepad to my reactjs project?
- → How to use Cloud Functions for Firebase to prerender pages for SEO?
- → React.js component has null state?