ValueChanges & SnapshotChanges, no longer get complete listings with Firebase AngularFire2

Question

We are having serious problems with recent changes in how AngularFire views objects / lists and refers to objects in our application.

The main AngularFireObject & AngularFireList how the old AngularFireObject & AngularFireList worked compared to the new ones. Our application was / strongly dependent on the value of $key , as we strongly denormalized (as recommended).

Now, documents use an example map to get the value of $key , but that doesn't work the same way, and even valueChanges() doesn't seem to work.

I'm not quite sure what to do with the changes now.

Consider:

Old way

 /* /items/ a/{name: 'Dennis', city: 'Dallas'} b/{name: 'Katie', city: 'Austin'} c/{name: 'Will', city: 'Chicago'} */ let myAfList = this.af.list('path/to/items'); let itemsFirst, itemsSecond, itemsThird; myAfList.subscribe(items => itemsFirst = items); setTimeout(_ => myAfList.subscribe(items => itemsSecond = items), 1000); setTimeout(_ => myAfList.subscribe(items => itemsThird = items), 2000); /* Results for all three item arrays itemsFirst: [ {name: 'Dennis', city: 'Dallas', $key: 'a'}, {name: 'Katie', city: 'Austin', $key: 'b'} {name: 'Will', city: 'Chicago', $key: 'c'} ]; */ 

All three subscriptions correctly receive the full array of elements and are configured to listen to future changes.

New way to change values:

 let myAfList = this.af.list('path/to/items').valueChanges(); let itemsFirst, itemsSecond, itemsThird; myAfList.subscribe(items => itemsFirst = items); setTimeout(_ => myAfList.subscribe(items => itemsSecond = items), 1000); setTimeout(_ => myAfList.subscribe(items => itemsThird = items), 2000); /* Results for ONLY itemsFirst itemsFirst: [ {name: 'Dennis', city: 'Dallas'}, {name: 'Katie', city: 'Austin'} {name: 'Will', city: 'Chicago'} ]; */ 

ItemsFirst , since the first subscription correctly receives items. The other two elements receive nothing, but all three subscribe to future changes. No key value.

With card for $ key

 let myAfList = this.af.list('path/to/items').snapshotChanges() .map(actions => { return actions.map(action => { const $key = action.payload.key; const data = { $key, ...action.payload.val() }; return data; }); }); let itemsFirst, itemsSecond, itemsThird; myAfList.subscribe(items => itemsFirst = items); setTimeout(_ => myAfList.subscribe(items => itemsSecond = items), 1000); setTimeout(_ => myAfList.subscribe(items => itemsThird = items), 2000); /* Results for ONLY itemsFirst itemsFirst: [ {name: 'Dennis', city: 'Dallas', $key: a}, {name: 'Katie', city: 'Austin', $key: b} {name: 'Will', city: 'Chicago', $key: c} ]; */ 

$key now included in the list, but again, it is only in the first list of elements ...

Thus, quick observation is the objects that now represent a simple wrapper around the main links to the base base, and valueChanges () needs to be moved to the auxiliary side, for example:

 let myAfList = this.af.list('path/to/items'); myAfList.valueChanges().subscribe(items => itemsFirst = items); 

It works! Hooray! But what about the key? well, I have to write the display function over and over again. Or create my own function, but it is not on the proto object, so I have to add it to every file that I use in it ...

What am I missing? What is the correct way to get $ key, do subscribers always get full values?

Is there a better way to do this?

Answer 1

You can explore this possibility:

 // Generate a reference to a new location and add some data using push() var newPostRef = postsRef.push(); // Get the unique key generated by push() var postId = newPostRef.key; 

a source