Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

212
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!