[AngularFire 2] Joins in Firebase

最新推荐文章于 2025-08-09 18:20:04 发布

weixin_33719619

最新推荐文章于 2025-08-09 18:20:04 发布

阅读量66

点赞数

文章标签：数据库 ui

本文介绍如何在 Firebase 中设置索引并进行高效查询。首先通过在 Firebase 控制台中配置索引来加速查询过程，接着展示了如何使用 AngularFire 进行具体查询操作，包括按 URL 查找课程及获取课程的所有课程章节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Lets see how to query Firebase.

First thing, when we do query, 'index' will always help, for both SQL and NoSQL.

In Firebase, we can also set index on props, for example we want to set an 'index' on 'courses' --> 'url' prop, we will use 'url' to locate course object.

How to set up index?

In Firebase console --> database --> Rules:

We tell Firebase, for 'courses' document, we want to set index on 'url'.

After setting up index, then how can we do query?

  findCourseByUrl(courseUrl): Observable<Course>{
    return this.angularFire.database.list('courses', {
      query: {
        orderByChild: 'url',
        equalTo: courseUrl
      }
    })
    .map((courses) => courses[0]); // get courses document which url = courseUrl
  }

We need to pass 'query' object for searching course. Notice we are using 'orderByChild' and 'equalTo'.

Get courses' lessons:

  findAllCourseLessons(courseUrl){
    const course$ = this.findCourseByUrl(courseUrl);

    const lessonsPreCourse$ = course$
      .filter(course => !!course)
      .switchMap((course) => {
        console.log(course);
        return this.db.list(`lessonsPerCourse/${course.$key}`)
      });

    return lessonsPreCourse$
      .map((lessonKeys) => lessonKeys
          .map( (lessonKey) => {
             return this.db.object(`lessons/${lessonKey.$key}`)
          }))
      .flatMap((res) => {
        return Observable.combineLatest(res);
      });

  }

We have a document 'lessonsPreCourse' to maintain the lessons which course includes:

This is normalize the dataset, to avoid nest array.

After getting 'lessonsPreCourse', we are going to get all the lessons in 'lessons' document.

Then in the UI, we can use 'async' pipe to show the lessons:

<md-list>
  <md-list-item *ngFor="let lesson of lessons$ | async">
    <a *ngIf="lesson.hasVideoUrl" [href]="lesson.videoUrl">{{lesson.description}}</a>
    <span *ngIf="!lesson.hasVideoUrl">{{lesson.url}}</span>
  </md-list-item>
</md-list>

  ngOnInit() {
    if(this.route.snapshot.params['url']){
      const url = this.route.snapshot.params['url'];
      this.lessons$ = this.courseService.findAllCourseLessons(url);
    }
  }

Github