javascript 如何在Angular组件和服务中处理Firebase 9快照

vc9ivgsu 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(118)

我已经运行我的应用程序完美地与
“@angular/fire”：“^6.1.5”，
“火线”：“^8.6.3”，
就像是
Service.ts

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

Component.ts

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

而且这样的代码遍布应用程序，现在我已经移到了最新版本的firebase也就是
“火线”：“^9.0.1”，“Angular /火线”：“^7.0.4”，
新的变化是
service.ts

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

和组件。ts

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

但我在控制台上什么也没有得到。
按照这里所描述的，看起来我必须在组件文件中管理它。它是使用onSnapshot的唯一选项吗？
请帮助我一个更好的方法比改变组件的代码。

JavaScript

来源：https://stackoverflow.com/questions/69131797/how-to-handle-onsnapshot-of-firebase-9-in-angular-component-and-service

1条答案

按热度按时间

g6ll5ycj1#

经过大量的挖掘，我能够找到以下解决方案，它将允许您以类似于snapshotChanges以前的方式返回快照。
服务：

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()));
  }
}

组件：

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);
    })
  }
}

不幸的是，文档并不像它可能的那样清晰或深入，因为Firebase 9仍然很新，但随着时间的推移，它肯定会改进。

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 如何在Angular组件和服务中处理Firebase 9快照

1条答案

相关问题

热门标签

最新问答