如何使用 AngularFire 从 FireStore 获取数据快照? (未设置侦听器来接收数据更改事件。)

发布于 2025-01-16 07:29:48 字数 2216 浏览 0 评论 0原文

Cloud Firestore文档表示有两种检索方法data:

  • 调用方法获取数据。
  • 设置监听器来接收数据更改事件。

AngularFire 文档展示了后者,如何创建一个 Observable 并使用 valueChanges() 来监听数据更改事件。效果很好。

我没有看到任何关于 get() 检索数据快照的 AngularFire 文档。我尝试了这个

constructor(
    public firestore: AngularFirestore,
) { }

onGetDocument() {
    this.firestore.collection('greatest-computer-scientists').doc('Ada Lovelace').get()
      .then((doc: any) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
        } else {
          console.log("No such document!");
        }
      }).catch((error: any) => {
        console.log("Error getting document:", error);
      });
}

错误消息是:

TS2339: Property 'then' does not exist on type 'Observable<DocumentSnapshot<unknown>>'.

87       .then((doc: any) => {
          ~~~~

这是有道理的。 Promise 不是来自 Observables。但是我什么时候创建了一个 Observable 呢?

让我们从模块化(Web 版本 9)更改为命名空间(Web 版本 8):

constructor(
    public firestore: AngularFirestore,
) { }

onGetDocument() {
    this.docRef = this.firestore.collection('greatest-computer-scientists').doc('Ada Lovelace');
    this.docSnap = getDoc(this.docRef);
    if (this.docSnap.exists()) {
      console.log("Document data:", this.docSnap.data());
    } else {
      // doc.data() will be undefined in this case
      console.log("No such document!");
    }
}

错误是

FirebaseError: Expected type 'Zu', but it was: a custom AngularFirestoreDocument object

这表明我们正在从数据库获取数据,但 TypeScript 抛出错误,因为我没有设置类型。让我们将 docSnap 设置为字符串数组:

docSnap: string[] | null = null;

现在错误消息变得有趣:

TS2740: Type 'Promise<DocumentSnapshot<unknown>>' is missing the following properties from type 'string[]': length, pop, push, concat, and 28 more.

我们返回的是 Promise,而不是 Observable。我们可能会取回数据。如何从 Cloud FireStore 获取 Angular 的数据快照?

The Cloud Firestore documentation says that there are two ways to retrieve data:

  • Call a method to get the data.
  • Set a listener to receive data-change events.

The AngularFire documentation shows the latter, how to make an Observable and use valueChanges() to listen for data-change events. That works great.

I don't see any AngularFire documentation for get() to retrieve a data snapshot. I tried this

constructor(
    public firestore: AngularFirestore,
) { }

onGetDocument() {
    this.firestore.collection('greatest-computer-scientists').doc('Ada Lovelace').get()
      .then((doc: any) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
        } else {
          console.log("No such document!");
        }
      }).catch((error: any) => {
        console.log("Error getting document:", error);
      });
}

The error message is:

TS2339: Property 'then' does not exist on type 'Observable<DocumentSnapshot<unknown>>'.

87       .then((doc: any) => {
          ~~~~

That makes sense. Promises don't come from Observables. But when did I make an Observable?

Let's change from modular (Web version 9) to namespaced (Web version 8):

constructor(
    public firestore: AngularFirestore,
) { }

onGetDocument() {
    this.docRef = this.firestore.collection('greatest-computer-scientists').doc('Ada Lovelace');
    this.docSnap = getDoc(this.docRef);
    if (this.docSnap.exists()) {
      console.log("Document data:", this.docSnap.data());
    } else {
      // doc.data() will be undefined in this case
      console.log("No such document!");
    }
}

The error is

FirebaseError: Expected type 'Zu', but it was: a custom AngularFirestoreDocument object

This suggests that we're getting the data from the database but TypeScript is throwing an error because I didn't set the type. Let's set docSnap as an array of strings:

docSnap: string[] | null = null;

Now the error message gets interesting:

TS2740: Type 'Promise<DocumentSnapshot<unknown>>' is missing the following properties from type 'string[]': length, pop, push, concat, and 28 more.

We're getting a Promise back, not an Observable. And we might be getting data back. How do I get a data snapshot to Angular from Cloud FireStore?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

虚拟世界 2025-01-23 07:29:48

AngularFirestore 中的 get() 方法返回一个仅触发单个事件的 Observable。如果我正确地阅读了代码,则会发生此处 在 RxFire 中 - 但我不完全确定这一点。

如果你想处理一个 Promise,你可以在可观察对象上调用 first()

The get() method in AngularFirestore returns an Observable that will only ever fire a single event. If I read the code correctly, it happens here in RxFire - but I'm not entirely sure of that.

If you want to deal with a promise, you can call first() on the observable.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文