angular - Cum pot să creez o metodă într-un serviciu care să returneze rezultatul lui onSnapshot și apoi să o folosesc în Componenta sau Pagina mea Ionic?

Folosesc „ionic-angular”: „3.7.1” și Firebase Cloud Firestore. Vreau să obțin toate documentele din colecția Post de fiecare dată când acestea sunt actualizate, șterse sau adăugate. Știu că prin apelarea metodei onSnapshot pot să le obțin, așa că am definit această metodă într-un serviciu.

getPosts(token: string){
  const userId = this.authService.getActiveUser().uid;
  let posts = [];
  return firebase.firestore().collection("Post").onSnapshot(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          posts.push(doc.data());
        });
        console.log("Posts: ", posts.join(", "));
        return posts;
      });
}

Deci, în consolă pot vedea toate postările mele din interiorul array-ului Posts, dar dacă apelez această metodă folosind this.post.getPosts(token) în componenta mea, primesc următorul rezultat în consolă:

ƒ () {
  asyncObserver.mute();
  firestoreClient.unlisten(internalListener);
}

Deci, cum pot să creez o metodă într-un serviciu care să returneze rezultatul lui onSnapshot și apoi să o folosesc în Componenta mea sau în Pagina Ionic?

Documentație

https://firebase.google.com/docs/reference/js/firebase.firestore.Query?hl=es-419

https://firebase.google.com/docs/firestore/query-data/listen?hl=es-419

Răspuns #1

Actualizare:

Dacă trebuie să vezi cum să implementezi un service/provider generic cu Firestore, te rugăm să consulți acest articol.

Feedback Vechi:

Trebuie să folosești funcții fat arrow aici și ai făcut mai multe greșeli aici. Poți încerca codul de mai jos code.

  getPosts(token: string){
    const userId = this.authService.getActiveUser().uid;
    let posts = [];

     retrun firebase.firestore().collection("Post").get().then((querySnapshot)=> 
     {
       querySnapshot.forEach((doc)=> {
           posts.push(doc.data());
      });
        return posts;
     });
 }

Doc

Răspunsul #2

Așa ai putea să o implementezi:

Returnați un Observable din serviciul dvs.:

getPosts(token: string) {
  const userId = this.authService.getActiveUser().uid;
  let posts = [];
  return new Observable(observer => {
    const unsubscribe = firebase.firestore().collection("Post").onSnapshot(querySnapshot => {
      querySnapshot.forEach(function(doc) {
        posts.push(doc.data());
      });

        observer.next(posts);
      });

    return () => {
      unsubscribe();
    };
  });
}

Apoi, la Componenta sau Pagina ta Ionic:

const _this = this; // 'this' inside 'subscribe' refers to the observable object
this.postsObserver = this.branchService.getPosts(token);
this.postsObserver
  .subscribe({
    next(posts) {
      _this.posts = posts;
    },
    error(error) { console.log(error); }, // optional
  });

De fiecare dată când schimbi oricare dintre postările tale, acea schimbare se va reflecta deja în listă fără să fie nevoie să apelezi getPosts din nou.

Notă:

De asemenea, dacă serviciul tău este exclusiv pentru posts (ceea ce recomand), îți recomand să păstrezi o singură referință la colecția posts atunci când inițializezi serviciul:

  this.postsRef = firebase.firestore().collection('Post');

firebase.firestore().collection('Post') nu contează în cadrul cotei bazei tale de date, dar nu strică să păstrezi codul mai curat folosind this.postsRef în toate celelalte interogări ulterioare către colecția respectivă.

Editează:

Am adăugat funcția „teardown” care este apelată când Observable este distrus. În acest caz, când distrugem Observable, oprim listener-ul Firebase Realtime să mai asculte pentru actualizări. Eliberează mai multă lățime de bandă pentru clientul tău.

Referințe :

• Documentație Angular
• Document Firebase
• Învățarea observabilelor