Angular5 what's happened with valuechanges() function ? (angularfire2)

Question

I try to understand .valueChanges() and .subscribe() I use AngularFire2 and Angular5

My code works but I don't understand how it works.

My Component :

ngOnInit() {
    this.itemService.getLastUnicorns().subscribe(items => {
        this.items = items;
        console.log(items);
    });
}

console.log give a beautiful array : Array [ {…}, {…} ]

My service :

getLastUnicorns() {
    this.items = this.afs.collection('unicorns', ref => ref.limit(2)).valueChanges();
    console.log(this.items);
    return this.items;
}

console.log give Object { _isScalar: false, source: {…}, operator: {…} } euh WTF ?

QUESTION: what's happened in the service to give this strange object and how I am able to recover a beautiful array in my component ? Thank you

score 4 · Accepted Answer · answered Jan 29 '18 at 15:47

So when you do .valueChanges() in AFS then it is going to return an observable. What is an Observable?

Observables open up a continuous channel of communication in which multiple values of data can be emitted over time.

So to get a value from an Observable you must subscribe to it. So in your component you are subscribing to it so it will log the actual array anytime the value changes. In your service you are literally just logging an observable which looks really weird and does not log like you would expect. If you wanted your service to log an array you could do this:

this.items = this.afs.collection('unicorns', ref => ref.limit(2))
     .valueChanges()
     .subscribe(data=>{
         console.log(data);
        })

Hope that helps, let me know if you need any further clarification.

SeanMC · Answer 2 · 2018-04-13T03:13:33.097

Might not be relevant but please be gentle -I found this question when looking for a way to listen to collection changes and get back document references. I used

  private projectsCollection: AngularFirestoreCollection<any>;
  projects: QueryDocumentSnapshot[];


    this.projectsCollection = this.angularFireStore.collection('projects');

    this.projectsCollection.snapshotChanges().subscribe(data => {
      this.projects = data.map(data => data.payload.doc)
    });

and then I displayed them kind of like this

<ul>
  <li *ngFor="let project of projects">
    {{ project.data() | json }}
    <button (click)="delete(project.ref)">Delete</button>
  </li>
</ul>

This way I'm able to display data output and also use document references from the same array. So if I use a doc reference to delete from the the collection -it updates the array and thus updates the displayed list all at once

score 0 · Answer 3 · answered May 24 '20 at 11:50

AngularfireList is having various property .but two of them are valueChanges() and snapshotChanges() .if you normally do this this.itemService.getLastUnicorns(); it will returns the AngularFireList object .So you can changes this object into observable by doing this.itemService.getLastUnicorns().valueChanges(); Now it will return simple observale like this

``Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}``

now .susbsribe(re => {console.log(re)}); print that array present in to that returned obervable

Blockquote and snapshotChanges() return the complex data structure with other properties enter link description here

Angular5 what's happened with valuechanges() function ? (angularfire2)

3 Answers3

Linked