Я создал небольшое приложение для отслеживания того, сколько времени я провожу на разных курсах (в качестве преподавателя), используя Angular 5 и помещаю мои данные в Firestore через AngularFire2.Большинство вещей сработало хорошо, но в заключительной части приложения у меня серьезные проблемы.Я довольно новичок в Angular / Firebase и, что важнее всего (возможно) с реактивным программированием.
Данные, которые хранятся в Firestore, довольно просты: Данные, хранящиеся в Firebase Он состоит из шестиполя для информации о курсе, когда был проведен курс и, что наиболее важно, что я делал (называется Элемент) и как долго (называется Продолжительность).
Теперь я хотел бы сделать отчеткоторый суммирует все длительности для каждой вещи, которую я сделал (Элемент).По сути, то, что я хотел бы сделать, это эквивалент GroupBy в SQL.Насколько я понимаю, 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]);
Вывод можно увидеть на этом изображении: Вывод из запущенной программы
Итак, подведем итог: я хотел бы собрать все данные в массив WorkItem, а затем вычислить, сколько времени было потрачено на различные задачи, а затемотобразить его в списке на веб-странице.Я не дошел до части отображения и подозреваю, что у меня снова возникнут проблемы с заполнением массива при привязке к списку.Мне трудно понять реактивное программирование ...
Любая помощь будет принята с благодарностью!
// Тобиас