Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

207
Vistas
cómo manejar onSnapshot of firebase 9 en componente angular y servicio

He ejecutado mi aplicación perfectamente con

"@angular/fuego": "^6.1.5",
"base de fuego": "^8.6.3",

y fue como

Servicio.ts

 getUserEventSummary(userId) { this.firestore.collection(`/user/${userId}/event_summary`).doc('current').snapshotChanges().pipe( map(changes => changes.payload.data()) ); }

componente.ts

 this.service.getUserEventSummary(this.userId).subscribe((res: any) => { this.values = res; }

Y ese código está en toda la aplicación. Ahora me he mudado a la última versión de firebase que es

"base de fuego": "^9.0.1", "@angular/fuego": "^7.0.4",

Y nuevos cambios son

servicio.ts

 getUserEventSummary(userId) { return onSnapshot(doc(db, 'general_lookup', 'onboarding_page'), (document) => { return document.data(); }); }

Y componente.ts

 const data = this.homeService.getOnboaringCollection(); console.log(data);

Pero no obtengo nada en la consola.

Según se describe aquí, parece que tengo que administrarlo dentro del archivo del componente. ¿Es la única opción para trabajar con onSnapshot ?

Por favor, ayúdenme con un mejor enfoque que cambiar el código de los componentes.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Después de mucha investigación, pude encontrar la siguiente solución que le permitirá devolver las instantáneas de una manera similar a como lo haría snapshotChanges anteriormente.

Servicio:

 import { Injectable } from '@angular/core'; import {doc, docSnapshots, Firestore} from '@angular/fire/firestore'; import {map} from "rxjs/operators"; @Injectable({ providedIn: 'root' }) export class ExampleService { constructor(private firestore: Firestore) {} async getUserEventSummary() { const ref = doc(this.firestore, 'general_lookup', 'onboarding_page'); return docSnapshots(ref).pipe(map(data => data.data())); } }

Componente:

 import {Component, OnInit} from '@angular/core'; import {ExampleService} from "./services/example.service"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { constructor(private service: ExampleService) {} async ngOnInit(): Promise<void> { const doc$ = await this.service.getUserEventSummary(); doc$.subscribe(data => { console.log(data); }) } }

Desafortunadamente, la documentación no es tan clara o detallada como podría ser porque Firebase 9 aún es muy nuevo, pero con el tiempo seguramente mejorará.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda