Javascript 将Firestore数据放入具有角度的数组

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

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

现在，我想做的是做一个报告，总结我所做的每件事的所有持续时间（元素）。本质上，我想做的是与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]);

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

我知道反应式编程将进行异步调用，因此我无法确定数据何时被填充。但是，我不明白为什么我能在最后两行的第一行看到数组的内容，而在第二行看不到

我的第二次尝试是基于从集合本身的文档中获取数据，并且为了防止空数组，使用.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]);

可以在此图像中看到输出：

总而言之，我想做的是收集WorkItem数组中的所有数据，然后计算在不同任务上花费的时间，然后将其显示在网页的列表中。我还没有来到显示部分，我怀疑当绑定到列表时，数组没有填充会再次出现问题。我很难理解反应式编程

任何帮助都将不胜感激

---

//Tobias

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

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

未定义的

只需在

forEach

中进行日志记录，您就会看到数据被正确地推送

---

另一个例子是：

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

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

未定义的

只需在

forEach

中进行日志记录，您就会看到数据被正确地推送

---

另一个例子是：

嗨，谢谢，但我看不出这有什么帮助。。。是的，如果我在forEach内部登录，我可以看到它，但它在外部仍然“不可用”。我想操纵内容并将其发送到HTML列表中，这是不可能的，因为数组被视为未定义的。您好——事实上，根据您的解释，我认为它比我想象的更好。我放弃了日志记录，转而尝试使用数组，到目前为止，它实际上工作得更好。我会再做一点实验看看是否可以。但是谢谢！很高兴我能帮上一点忙：）是的，就像你说的那样——一切都正常，但我盯着控制台看得太多了。。。非常感谢！嗨，谢谢，但我看不出这有什么帮助。。。是的，如果我在forEach内部登录，我可以看到它，但它在外部仍然“不可用”。我想操纵内容并将其发送到HTML列表中，这是不可能的，因为数组被视为未定义的。您好——事实上，根据您的解释，我认为它比我想象的更好。我放弃了日志记录，转而尝试使用数组，到目前为止，它实际上工作得更好。我会再做一点实验看看是否可以。但是谢谢！很高兴我能帮上一点忙：）是的，就像你说的那样——一切都正常，但我盯着控制台看得太多了。。。非常感谢！