0

Actualmente estoy haciendo un proyecto con angular y firebase, el problema es que cuando quiero obtener un solo documento en el momento en que aparece el archivo console.log del componente, me devuelve indefinido. Este es el código del servicio:

import { Injectable } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument,
} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from '../interfaces/Product';

@Injectable({
  providedIn: 'root',
})
export class ConexionService {
  private itemsCollection: AngularFirestoreCollection<Product>;
  private items: Observable<Product[]>;
    private itemDoc: AngularFirestoreDocument<Item>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Product>('Products');
    this.items = this.itemsCollection.snapshotChanges().pipe(
      map((actions) =>
        actions.map((a) => {
          const data = a.payload.doc.data() as Product;
          const id = a.payload.doc.id;
          return { id, ...data };
        })
      )
    );
  }
listItem() {
    return this.items;
  }

  getOne(id: string): any {
    this.afs
      .collection<Product>('Products')
      .doc(id)
      .ref.get()
      .then((doc) => {
        if (doc.exists) {
          console.log(doc.data());
          return doc.data();
        } else {
          return 'Doc does not exits';
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
}

Y este es el código del componente

constructor(private _service: ConexionService){
     console.log('from component-', this._service.getOne('data_1'));
}

Esta es la salida de la consola:

from component-undefined

Creo que el problema es que se llama a la función antes de que se optengan los datos de Firebase, pero no sé cómo resolverlo.

1 respuesta 1

0

El problema es que estás tratando un bloque de ejecución asíncrono entonces cuando intentas obtener un valor del método getOne la promesa no está resuelta, y además el método no tiene ningún valor de retorno, solamente la promesa.

Tienes dos opciones:

OPCIÓN A

  1. Retornas la promesa y ejecutas el then en el componente (no la recomiendo)

OPCIÓN B

  1. Creas un BehaviorSubject en el servicio (selectedDocSubject) y llamas igual al método getOne sin embargo no lo asignas a nada, ya que el método solo se encargará de hacer el llamado asíncrono a firebase.
  2. Cuando la promesa se resuelve, vamos a ejecutar un .next en el behavior subject para enviar un nuevo valor en el flujo, si el objeto existe enviamos el objeto y sino enviamos nulo.
  3. Vamos a tener también un método llamado getSelectedProduct que va a retornar un observable, este lo puedes obtener en el componente y suscribirte (o mejor aún usar async pipe para obtener el valor en la plantilla)

import { Injectable } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument,
} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from '../interfaces/Product';

@Injectable({
  providedIn: 'root',
})
export class ConexionService {
  private itemsCollection: AngularFirestoreCollection<Product>;
  private items: Observable<Product[]>;
  private itemDoc: AngularFirestoreDocument<Item>;
  private selectedDocSubject: BehaviorSubject<Product | null>

  constructor(private afs: AngularFirestore) {
    this.selectedDocSubject = new BehaviorSubject<Product>(null)
    this.itemsCollection = afs.collection<Product>('Products');
    this.items = this.itemsCollection.snapshotChanges().pipe(
      map((actions) =>
        actions.map((a) => {
          const data = a.payload.doc.data() as Product;
          const id = a.payload.doc.id;
          return { id, ...data };
        })
      )
    );
  }
listItem() {
    return this.items;
  }
  
  // Vamos a retornar el BehaviorSubject como un observable para que
  // el componente no sea capaz de ejecutar un .next() sino solamente
  // de suscribirse.
  getSelectedProduct(): Observable<Product | null> {
    return this.selectedProductSubject.asObservable()
  }

  getOne(id: string): any {
    this.afs
      .collection<Product>('Products')
      .doc(id)
      .ref.get()
      .then((doc) => {
        if (doc.exists) {
         this.selectedProductSubject.next(doc)
        } else {
          // Este mensaje lo puedes manejar en el componente en caso de que el selectedProduct este nulo
           this.selectedProductSubject.next(null)
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.