使用 Angular 将 Firestore 数据放入数组中

Question

我创建了一个小型应用程序，用于跟踪我使用 Angular 5 在不同课程（作为教师）上花费的时间，并通过 AngularFire2 将我的数据放入 Firestore。大多数事情都很顺利，但对于应用程序的最后一部分，我遇到了严重的问题。我是 Angular/Firebase 的新手，最重要的是（也许）是响应式编程。

存储在 Firestore 中的数据非常简单： Data stored in Firebase 它由六个字段组成，包含有关课程、课程举办时间以及最重要的是我做了什么（称为元素）和持续多长时间（称为持续时间）的信息。

现在，我想做的是制作一份报告，总结我所做的每件事（元素）的所有持续时间。本质上，我想做的是相当于 SQL 中的 GroupBy。据我了解，Firebase 没有分组操作。

我迄今为止失败的方法是尝试创建一个数组，我将数据放入其中并对其进行计算。我就是在这里失败了。

我的第一次尝试是基于创建一个观察者，因为大多数示例用于在教程中检索数据。 WorkItem 是一个简单的类，其内容与 Firebase 中的相同。

this.lectureDoc = this.afs.collection(`users/${this.afAuth.auth.currentUser.uid}/regTime`,
ref => ref.where('course', '==', this.selectedCourse.courseName).orderBy('element') );

this.lectureItems = this.lectureDoc.snapshotChanges().pipe(
  map (courses => courses.map(a => {
  const data = a.payload.doc.data() as WorkItem;
  const id = a.payload.doc.id;
  return { id, ...data };
  })
));

this.lectureItems.subscribe(item => { 
  item.forEach(i => {
    this.allElements.push(i);
  });
});

console.error(this.allElements);
console.error(this.allElements[0]);

最后两行显示了问题，即（最后两行中的）第一行将返回完整的数组，而第二行将返回“未定义”。

我了解响应式编程会进行异步调用，因此我无法确定何时填充数据。但是，我不明白为什么我可以在最后两行的第一行看到数组的内容，而在第二行看不到。

我的第二次尝试是基于从集合本身的文档中获取数据，并且为了防止空数组，使用 .then() 但最后两行再次显示与之前完全相同的输出。

this.lectureDoc.ref.get().then(item => {
 item.forEach(i => {
  this.lectures.push(i.data() as WorkItem);
 });
});

console.error(this.lectures);
console.error(this.lectures[0]);

可以在这张图片中看到输出：Output from the running program

所以，回顾一下，我想做的是收集一个 WorkItem 数组中的所有数据，然后计算在不同任务上花费了多少时间，然后将其显示在网页上的列表中。我还没有来到显示部分，我怀疑当绑定到列表时数组没有被填充，我会再次遇到麻烦。我很难理解反应式编程......

任何帮助将不胜感激！

//托比亚斯

Answer 1

据我所知，这是控制台非常常见的行为，至少在 Chrome 中是这样。当您记录异步但尚未填充的数据时，一旦异步操作完成，控制台仍会显示该数组。

但是当您在数组中记录一个对象时，在您记录该对象时该对象还不存在，因此日志将显示为undefined。

只需在forEach 内进行日志记录，您就会看到数据被正确推送。

另一个案例，例如：Console.log behavior