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

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

1 个答案: