码迷,mamicode.com
首页 > 其他好文 > 详细

[AngularFire 2] Joins in Firebase

时间:2016-10-12 07:03:44      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

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

[AngularFire 2] Joins in Firebase

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5951376.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!