[英]Why subscribing an Observable returning a list of FireStore document snapshot I can't build a proper list of objects? I obtain undefined objects
I am fighting with AngularFire into an Angular project trying to perform a query on FireStore database that retrieve all the documents in a collection and the related UID.我正在与 AngularFire 对抗 Angular 项目,试图对 FireStore 数据库执行查询,以检索集合中的所有文档和相关的 UID。
Basically I have the following situation:基本上我有以下情况:
So, as you can see, at the moment I only have a single collection named calendar containing some documents where each document represent an event on a calendar (but this detail is not so important now).因此,正如您所看到的,目前我只有一个名为 calendar 的集合,其中包含一些文档,其中每个文档代表日历上的一个事件(但现在这个细节并不那么重要)。
Into my Angular application I have a service class containing this method that simply perform a query to retrieve all the documents inside my calendar collection using the snapshotChanges() method in order to ontain the entire snapshot including the UID and the data :在我的 Angular 应用程序中,我有一个服务 class 包含此方法,该方法只需执行查询以使用snapshotChanges()方法检索我的日历集合中的所有文档,以获取包括UID和数据的整个快照:
getEvents(): Observable<any[]> {
this.items = this.db.collection('calendar').snapshotChanges();
return this.items;
}
Then into the TypeScript code of a component I subscribe the Observable object returned by the previous method in order to build an object containind the UID and the data.然后进入一个组件的 TypeScript 代码,我订阅了前面方法返回的Observable object,以便构建一个包含 UID 和数据的 object。 I have done it in this way:
我是这样做的:
this.eventService.getEvents().subscribe(eventsSnaps => {
this.events = eventsSnaps.map(currentCourseSnap => {
console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
var currentCourse = {
id: currentCourseSnap.payload.doc.id,
...currentCourseSnap.payload.doc.data
}
})
console.log("EVENTS FROM SNAPS: ", this.events);
});
And here I am obtaining a strange behavior.在这里,我得到了一个奇怪的行为。
The first console.log() print correctly the retrieved UID of all the document obtained from FireStore but the second consle.log() printing the entire array of built object retrieve an array of undefined , in my Chrome console I obtain this output:第一个 console.log() 正确打印从 FireStore 获得的所有文档的检索 UID,但第二个 consle.log() 打印构建的 object 的整个数组检索undefined数组,在我的 Chrome 控制台中,我得到了这个 output:
EVENTS FROM SNAPS: (16) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
Why it can't correctly build my objects?为什么它不能正确构建我的对象? What is wrong?
怎么了? What am I missing?
我错过了什么? How can I solve this problem?
我怎么解决这个问题?
When the curly braces are included in an arrow function, the return
statement should be stated explicitly.当花括号包含在箭头 function 中时,应明确说明
return
语句。 Try the following尝试以下
this.eventService.getEvents().subscribe(eventsSnaps => {
this.events = eventsSnaps.map(currentCourseSnap => {
console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
var currentCourse = {
id: currentCourseSnap.payload.doc.id,
...currentCourseSnap.payload.doc.data
};
return currentCourse; // <-- return the object here
});
console.log("EVENTS FROM SNAPS: ", this.events);
});
this.eventService.getEvents().subscribe(eventsSnaps => {
this.events = eventsSnaps.map(currentCourseSnap => ({
id: currentCourseSnap.payload.doc.id,
...currentCourseSnap.payload.doc.data
}));
console.log("EVENTS FROM SNAPS: ", this.events);
});
The above is similar to writing以上类似于写法
this.eventService.getEvents().subscribe(eventsSnaps => {
this.events = eventsSnaps.map(currentCourseSnap => {
return {
id: currentCourseSnap.payload.doc.id,
...currentCourseSnap.payload.doc.data
}
}
});
console.log("EVENTS FROM SNAPS: ", this.events);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.