為什么訂閱返回 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);
});