如何使用 AngularFire 从 FireStore 获取数据快照? (未设置侦听器来接收数据更改事件。)
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
AngularFirestore
中的get()
方法返回一个仅触发单个事件的Observable
。如果我正确地阅读了代码,则会发生此处 在 RxFire 中 - 但我不完全确定这一点。如果你想处理一个 Promise,你可以在可观察对象上调用
first()
。The
get()
method inAngularFirestore
returns anObservable
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.