zoukankan      html  css  js  c++  java
  • [AngularFire 2] Joins in Firebase

    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

  • 相关阅读:
    浅析C++:private、protected和public
    数据结构关于简单顺序表的构建(C++)
    小小的项目——简单的注释转换
    宏定义实现两数交换
    简易小程序(将字符型数据转换为浮点型数据)
    小小比较格式运算符及截图显示
    python __call__() 方法
    python_selenium简单的滑动验证码
    scrapy 爬虫学习二[中间件的学习]
    scrapy 爬虫学习一
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5951376.html
Copyright © 2011-2022 走看看