我创建了一个小应用程序，用于跟踪我使用 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)编程......
任何帮助将不胜感激!
//托比亚斯
最佳答案
据我所知，这是控制台的一种非常常见的行为，至少在 Chrome 中是这样。当您记录异步但尚未填充的数据时，一旦异步操作完成，控制台仍将显示数组。
但是当您在数组中记录一个对象时，在您记录该对象时该对象还不存在，因此日志将显示为未定义。
只需在 forEach 内部进行日志记录，您就会看到数据被正确推送。
另一个案例，例如:Console.log behavior
关于javascript - 使用 Angular 将 Firestore 数据放入数组中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50741859/