CODEWITHSUNDEEP
angularionic3google-cloud-firestoreionic4
Rasool ALmusawie
Rasool ALmusawie

Reputation: 61

How to use snapshotChanges() with firestore and ionic 4

Hi myfriends i have code in my ionic4 app to retrieve a data from firestore and i try this code to do that but it didn't show any of those data

i tryed use snapshotChanges() in my code but it's failed and i also i want to retrieve id of documents how can i do this

my code is below here :

news.page.ts

import { Component, OnInit } from '@angular/core';
import {AngularFirestore, AngularFirestoreDocument} from 'angularfire2/firestore';
import {Observable} from 'rxjs';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';
export class FilmsPage implements OnInit {
  news: Observable<any[]>;
  constructor(public db: AngularFirestore, private router: Router) { }

  ngOnInit() {
      this.db.collection('123').snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
}

news.page.html

<ion-content padding>
        <ion-item *ngFor=" let count of news | async">
          <ion-button routerLink="/details/{{count.id}}">{{count.name}} -> id: {{count.id}}</ion-button>

</ion-item>
</ion-content>

Upvotes: 0

Views: 2643

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

There are a couple of issues currently with your implementation.

The first issues is that you need to assign the result of this.db.collection('123').snapshotChanges()... to your news: Observable<any[]> class property to be able to effectively use the async pipe in your template:

ngOnInit() {
  this.news = this.db.collection('123').snapshotChanges().map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data();
      const id = a.payload.doc.id;
      return { id, ...data };
    });
});

The next issue depends on your version of RxJS. If your project is using RxJS 5.5+, you should use pipeable operators. This would involve updating your import of the map operator as well as updating how it's used with snapshotChanges(). Effectively it would just be moving map() inside pipe():

import { map } from 'rxjs/operators';

// ...

ngOnInit() {
  this.news = this.db.collection('123').snapshotChanges().pipe(
    map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    })
  );
});

Hopefully that helps!

Upvotes: 3

Related Questions