为什么订阅返回 FireStore 文档快照列表的 Observable 我无法构建正确的对象列表？ 我获得未定义的对象

Question

我正在与 AngularFire 对抗 Angular 项目，试图对 FireStore 数据库执行查询，以检索集合中的所有文档和相关的 UID。

基本上我有以下情况：

因此，正如您所看到的，目前我只有一个名为 calendar 的集合，其中包含一些文档，其中每个文档代表日历上的一个事件（但现在这个细节并不那么重要）。

在我的 Angular 应用程序中，我有一个服务 class 包含此方法，该方法只需执行查询以使用snapshotChanges()方法检索我的日历集合中的所有文档，以获取包括UID和数据的整个快照：

getEvents(): Observable<any[]> {
    this.items = this.db.collection('calendar').snapshotChanges();

    return this.items;
}

然后进入一个组件的 TypeScript 代码，我订阅了前面方法返回的Observable object，以便构建一个包含 UID 和数据的 object。 我是这样做的：

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

在这里，我得到了一个奇怪的行为。

第一个 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]

为什么它不能正确构建我的对象？ 怎么了？ 我错过了什么？ 我怎么解决这个问题？

Answer 1

当花括号包含在箭头 function 中时，应明确说明return语句。 尝试以下

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

以上类似于写法

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