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

Question

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

Firestore 中存储的数据非常简单: Data stored in Firebase它由六个字段组成，用于提供有关类(class)的信息、类(class)何时举办以及最重要的是我做了什么(称为“元素”)以及持续了多长时间(称为“持续时间”)。

现在，我想做的是制作一份报告，总结我所做的每件事(元素)的所有持续时间。本质上，我想做的相当于 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]);

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

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

我的第二次尝试是基于从集合本身的文档中获取数据，并且为了防止空数组，使用 .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 数组中的所有数据，然后计算在不同任务上花费了多少时间，然后将其显示在网页上的列表中。我还没有到达显示部分，我怀疑我会再次遇到绑定(bind)到列表时未填充数组的问题。我很难理解响应式(Reactive)编程......

任何帮助将不胜感激!

//托比亚斯

Answer 1

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

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

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

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