首页 文章

Firestore AngularFire2分页(按范围查询项目 - .startAfter(lastVisible))

提问于
浏览
2

在一个组件中,我想从FireStore中提取一系列项目,例如 . 从0到5,从5到10等我在FireStore的文档中找到了this,但他们不使用AngularFire2,因此我更难以重构为更大的混乱 . 我只是通过以下方式使其工作:

service ->

topFirstScores(): AngularFirestoreCollection<Score> {
  return this.fireRef.collection('scores', r => r
          .orderBy('score', 'desc').limit(6)
  );
}

component ->

$scores = new Subject();

this.scores$ = this.$scores.asObservable();
if (this.scores === 'first') {
  this.scoreS.topFirstScores().valueChanges().take(1)
    .subscribe(_ => this.$scores.next(_.splice(0, 3)))
} else {
  this.scoreS.topFirstScores().valueChanges().take(1)
    .subscribe(_ => this.$scores.next(_.splice(3, 3)))
}

但这似乎更像是一种解决方法 . 谁能翻译这个:

var first = db.collection("cities")
        .orderBy("population")
        .limit(25);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // get the next 25 cities.
  var next = db.collection("cities")
          .orderBy("population")
          .startAfter(lastVisible)
          .limit(25);
});

那最好是 AngularFirestoreCollection<T>

2 回答

  • 4

    我有同样的问题,这就是我做的 .

    服务

    private _data: BehaviorSubject<Scores[]>;
    public data: Observable<Scores[]>;
    latestEntry: any;
    
    constructor(private afs: AngularFirestore) {}
    
    // You need to return the doc to get the current cursor.
      getCollection(ref, queryFn?): Observable<any[]> {
        return this.afs.collection(ref, queryFn).snapshotChanges().map(actions => {
          return actions.map(a => {
            const data = a.payload.doc.data();
            const id = a.payload.doc.id;
            const doc = a.payload.doc;
            return { id, ...data, doc };
          });
        });
      }
    // In your first query you subscribe to the collection and save the latest entry
     first() {
      this._data = new BehaviorSubject([]);
      this.data = this._data.asObservable();
    
      const scoresRef = this.getCollection('scores', ref => ref
        .orderBy('score', 'desc')
        .limit(6))
        .subscribe(data => {
          this.latestEntry = data[data.length - 1].doc;
          this._data.next(data);
        });
      }
    
      next() {
        const scoresRef = this.getCollection('scores', ref => ref
          .orderBy('scores', 'desc')
           // Now you can use the latestEntry to query with startAfter
          .startAfter(this.latestEntry)
          .limit(6))
          .subscribe(data => {
            if (data.length) {
              // And save it again for more queries
              this.latestEntry = data[data.length - 1].doc;
              this._data.next(data);
            }
          });
      }
    

    组件

    scores$: Observable<Scores[]>;
      ...
      ngOnInit() {
        this.yourService.first();
        this.scores$ = this.yourService.data;
      }
    
      nextPage() {
       this.yourService.next();
      }
    
  • -1

    我不知道FireBase,但是当你询问所有项目然后过滤时我真棒 .

    如果你创建一个方法,包括参数,页面和大小以及一个数组lastScore I supouse,你可以做一些(注意:我没有Firestone,最可能的,我错了,代码很糟糕)

    //In service
    
    lastScores:number[]=[];
    lastPage:number=0; //use to know where you reach the last page
    getNextHightScores(page:number,count:number)
    {
        //get the limit
        let last=page>0?lastScores[page-1]:999999999   //if page=0 a bigger score
        //use where and limit
        return afs.collection<Item>('scores', r =>  
                r.where("score", "<", last).orderBy("score","desc").limit(count)
                .valueChanges()
                .do(r=>{  //using do to store the lastScore
                   if (r.length)
                       this.lastScore[page]=r[r.length-1].score;
                   if (r.length<count)
                       this.lastPage=page;
                })
    }
    
    //in component
    page:number=0;
    ngOnInit(){
        getValues(0);
    }
    
    getValues(page)
    {
        service.getNextHightScore(page,5).subscribe(r=>{console.log(r)})
    }
    //and 
    <button (click)="page=page+1;getValues(page)">next scores</button>
    

相关问题