我試圖找出在Angular中加入Observables的基本知識。我找到了幾個例子,但似乎無法弄清楚如何有效地工作。如何在Angular中使用rxjs運算符加入Observable(angularfire2)
我有以下數據結構:
- courses
- $courseid1
- $courseid2
- $courseid3
- ...
- teachers
- $teacherid1
- $teacherid2
- $teacherid3
- ...
- teachersPerCourse
- $courseid1
- $teacherid1 : true
- $teacherid2 : true
- $courseid2
- $teacherid1 : true
- $courseid3
- $teacherid3 : true
- ...
現在,我使用下面的函數來獲取其塞課程:
getFullCourseBySlug(slug:string) {
return this.db.list('academy/courses', {
query: {
orderByChild: 'slug',
equalTo: slug
}
}).map((courses) => courses[0]);
}
現在我想老師的數組映射到課程對象,以便我最終得到一個可觀察到的東西,如下所示:
{
title: ...,
slug: ...,
teachers: {
$teacherid1: {
firstname: ...,
lastname: ...,
etc ... },
$teacherid2: {
firstname: ...,
lastname: ...,
etc ... }
}
}
我在其他地方有相同的原理工作,但我必須在地圖功能中使用訂閱,或使用Observable內的Observables。例如:
getCoursesPerCategory(categoryid:string):Observable<Course[]> {
return this.db.list(`academy/coursesPerCategory/${categoryid}`).map(courses => {
courses.map(course => {
this.db.object(`academy/courses/${course.$key}`).subscribe((data) => {
course.$value = data;
});
return course;
});
return courses;
});
}
如果有人可以幫助我舉一個例子,說明如何更有效地做到這一點,將不勝感激!
UPDATE:
我已經成功地得到它的工作,但我仍然無法擺脫嵌套的觀測量,這意味着我必須使用特里普爾異步管道(這可能不是最好的做法: P)我試圖按照建議使用flatMap,但還不知道如何去做。我現在所擁有的:
getFullCourseBySlug(slug:string): Observable<any> {
return this.db.list('academy/courses', {
query: {
orderByChild: 'slug',
equalTo: slug
}
}).map(courses => courses[0]).switchMap(course => {
course.teachers = this.db.list(`academy/teachersPerCourse/${course.$key}`)
.map(teachers => {
teachers.map(teacher => {
teacher.$value = this.db.object(`academy/teachers/${teacher.$key}`);
});
return teachers;
});
return Observable.of(course);
});
}
用下面的模板:
{{ (course | async)?.title }}
<ul>
<li *ngFor="let teacher of ((course | async)?.teachers) | async">
{{ (teacher.$value | async)?.firstname }}
</li>
</ul>
更新2:
見我的回答對我的解決方案
這真的幫了我在正確的方向,最終我設法得到它的工作,因爲我祝願!非常感謝廣泛的答覆和幫助。我會爲其他人發佈我的最終解決方案 –