通过不在 Firebase 实时数据库中工作的无限滚动顺序

Question

我正在尝试使用实时数据库实现无限滚动。我跟着一个教程。它以正确的顺序加载前 6 条记录。使用的函数getSamples() 按.orderByChild('age') 排序，其中age 是一个数字。

但是当我向下滚动到调用函数 loadData(event) 时，它甚至没有被调用。

请注意，如果我在这两个函数中将.orderByChild('age') 更改为.orderByKey()，则一切正常。

这是我当前的代码：

home.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import * as firebase from 'firebase';
import { AngularFireDatabase, AngularFireObject, AngularFireList } from '@angular/fire/database';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-newproduct',
  templateUrl: './newproduct.page.html',
  styleUrls: ['./newproduct.page.scss'],
})
export class NewproductPage implements OnInit {

  @ViewChild(IonInfiniteScroll, { static: false}) infiniteScroll: IonInfiniteScroll;
  bookingListRef: AngularFireList<any>;

  lastkey: string ="";

  samples=[];

  isFinished = false;
  constructor(private db: AngularFireDatabase) { }

  
  ngOnInit() {

    this.getSamples();
}

  getSamples(){
    firebase.database().ref("users/")
    .orderByChild('age')
    .limitToFirst(6)
    .once("value", snap=> {
      snap.forEach(child => {
        // store last key
        this.lastkey = child.key;
        // push data sample array
        this.samples.push(child.val());
      })
    })
  }


  loadData(event){
    console.log(this.lastkey);
    firebase.database().ref("users/")
    .orderByChild('age')
    // start at the last key we get
    .startAt(this.lastkey).limitToFirst(3).once("value", snap=>{
  
      // hide the spinner
      event.target.complete();

      // if no. of children is one, data is loaded fully
      if(snap.numChildren()==1){
        console.log("in here");
        this.infiniteScroll.disabled = true;
        this.isFinished = true;
      }
      else {
        console.log("in here");
        snap.forEach( child=> {

          if(this.lastkey != child.key){
            this.lastkey=child.key;
            this.samples.push(child.val());
          }
        })
      }
  
    })

    }

}

home.html

<ion-content>
<ion-item *ngFor="let sample of samples; let i=index;">
    <ion-label class="ion-text-wrap">
<p>{{sample.age}}</p>
    </ion-label>
  </ion-item>

  <ion-infinite-scroll threshold="100px"  (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div *ngIf="isFinished">
    <b>
      End of samples data
    </b>
  </div>

</ion-content>

console.log(this.lastkey); 返回正确的索引，转到 else 条件，其中消息写入console.log("in here"); 但loadData 函数不返回下一条记录。

编辑

我当前的 loadData 代码。问题：总是加载相同的下 6 条记录。 见video here。

  loadData(event){
    console.log(this.lastkey);
    firebase.database().ref("users")
    .orderByChild('age')
   //.orderByKey()
    // start at the last key we get
    .startAt(this.lastAge,this.lastkey)
    .limitToFirst(6)
    .once("value", snap=>{
  
      // hide the spinner
      event.target.complete();

      // if no. of children is one, data is loaded fully
      if(snap.numChildren()==1){
        console.log("in here");
        this.infiniteScroll.disabled = true;
        this.isFinished = true;
      }
      else {
        console.log("in here 2");
        snap.forEach(child=> {
          if(this.lastkey != child.key){
            this.lastkey=child.key;
            this.samples.push(child.val());
            console.log(this.samples);
          }
        })
      }
  
    })

    }

Answer 1

为了能够startAt 正确的节点，对于锚节点（您开始的节点），您需要（最多）两件事：

• 您订购的房产的价值。因此，在您的情况下，这就是 age 属性的值。
• 节点的键，用于在存在多个具有相同值的节点时消除歧义。如果您的值是唯一的，则不需要此键。

您只是传递密钥，这不是一个选项。您必须同时保留值和键。

所以：

firebase.database().ref("users/")
.orderByChild('age')
.limitToFirst(6)
.once("value", snap=> {
  snap.forEach(child => {
    this.lastAge = child.val().age;
    this.lastkey = child.key;
    this.samples.push(child.val());
  })
})

然后：

firebase.database().ref("users/")
.orderByChild('age')
.startAt(this.lastAge, this.lastkey).limitToFirst(3).once("value", snap=>{
  ...