zoukankan      html  css  js  c++  java
  • [AngularFire2] Pagination

    Let's see how to do pagination in Firebase:

    For the init loading, we only want 3 items:

      findLessonsKeyPreCourseUrl(courseUrl) {
        return this.findCourseByUrl(courseUrl)
          .filter(course => !!course)
          .map((course) => course.$key)
          .switchMap((courseKey) => this.db.list(`lessonsPerCourse/${courseKey}`, {
            query: {
              limitToFirst: 3,
              orderByKey: true
            }
          }));
      }

    'limitToFirst' --> If not given 'startAt', will start from index 0, and get three items.

    Next page: The idea is getting 4 items from the previous page's last item, after that we get rid of first item only keep the rest:

      findNextPageLessonsKey(courseUrl: string, from: Lesson, limit: number){
        return this.findCourseByUrl(courseUrl)
          .filter(c => !!c)
          .switchMap((c) => this.db.list(`lessonsPerCourse/${c.$key}`, {
            query: {
              limitToFirst: limit + 1,
              orderByKey: true,
              startAt: from.$key
            }
          }))
          .map(lessons => lessons.slice(1, lessons.length));
      }

    Previous Page: The same idea as next page, difference is this time we get 4 item from next page's first item, then get rid of the last item only keep the rest:

      findPreviousPageLessonsKey(courseUrl: string, end: Lesson, limit: number){
        return this.findCourseByUrl(courseUrl)
          .filter(c => !!c)
          .switchMap((c) => this.db.list(`lessonsPerCourse/${c.$key}`, {
            query: {
              limitToLast: limit + 1,
              orderByKey: true,
              endAt: end.$key
            }
          }))
          .map(lessons => lessons.slice(0, lessons.length-1));
      }
  • 相关阅读:
    php原生代码实现explode函数功能
    PHP的命名空间
    高性能索引策略二
    .Net Core缓存组件(Redis)源码解析
    .Net Core缓存组件(MemoryCache)源码解析
    Docker系列之Docker容器(读书笔记)
    Docker系列之Docker镜像(读书笔记)
    .Net Core中的日志组件(Logging)
    .Net Core Cors中间件解析
    .Net Core项目添加日志功能
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5967362.html
Copyright © 2011-2022 走看看