Angular 带有firebase实时数据库的ionic infinite scroll

我是爱奥尼亚的新手，不知道怎么做无限卷轴。我读了一些文件，但不明白 这是我的主页。我想要的是，在15-20项之后，无限卷轴工作，新的15-20项出现

这是我的主页。ts：

ngOnInit（）{
this.presentLoading（）
//this.items2=this.db.list（'/forms'）.valueChanges（）；
//this.items2.forEach（a=>console.log（a））
}
异步呈现加载（）{
const loading=等待this.loadingController.create({
cssClass:“我的自定义类”，
消息：“请稍候…”，
真的,，
持续时间：2500
});
等待加载。addEventListener（'ionLoadingWillPresent'，（事件：any）=>{
此参数为0.allForms=[]
this.mainS.getAllForms（）.subscribe（x=>{this.allForms=x
this.allForms.sort（（b，a）=>newdate（b.startDate）.getTime（）-newdate（a.startDate）.getTime（））
this.filterData=this.allForms
})
firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
this.db.object（'/users/'+user.uid+“/control”）.snapshotChanges（）.subscribe（c=>this.control=c.payload.val（））
}否则{
}
});
});
等待加载。当前（）；
等待加载.ondiddisease（），然后（x=>this.c=true）；
console.log（'卸载！'）；
}

getAllForms：

getAllForms（）{
返回此.db.list（'/forms/'）.snapshotChanges（）.pipe（映射（更改=>changes
.map（c=>（{key:c.payload.key，{c.payload.val（）作为{}}]）；
}

这是主要的html：

{{forms.name}
{{forms.place}
{{forms.startDate}

我解决了自己的问题：要点两个函数：getForms（）和loadData（）

offTopics:presentLoading（）和this.filterData

ngOnInit() {
    this.presentLoading()
   //this.items2 = this.db.list('/forms').valueChanges();
   //this.items2.forEach(a=>console.log(a))
  }
  
  async presentLoading() {
    const loading = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
      showBackdrop:true,
      duration:2500
    });
    await loading.addEventListener('ionLoadingWillPresent', (event: any) => {
      this.getForms()
    firebase.auth().onAuthStateChanged(user=> {
      if (user) {
        this.db.object('/users/' + user.uid+"/control").snapshotChanges().subscribe(c=>this.control = c.payload.val()) 
      } else {
      }
    });
    });
    await loading.present();
    
     await loading.onDidDismiss().then(x=>this.c=true);
    console.log('Loading dismissed!');
  }
  getForms(){
    firebase.database().ref("/forms").orderByKey().limitToFirst(9).once("value",snap=>{snap.forEach(a=>{
      this.lastKey = a.key
      this.deneme.push({key: a.key, ...a.val() as {}})})}).then(c=>this.filterData = this.deneme).then(b=>this.filterData.sort((b, a) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()))
      
  }
  loadData(event) {
    console.log(this.lastKey)
    firebase.database().ref("/forms").orderByKey().startAt(this.lastKey).limitToFirst(9).once("value", snap => {
      console.log("girdi")
          event.target.complete();
          console.log(snap.numChildren())
          if (snap.numChildren() == 1) {
           
            this.infiniteScroll.disabled = true;
            this.isFinished = true;
          }
          else {
            snap.forEach(child => {
             
              if (this.lastKey != child.key) {
                this.lastKey = child.key;
                this.deneme.push({key: child.key, ...child.val() as {}});
                this.filterData = this.deneme
              }
            })
          }
         
        })
    }

---

我解决了自己的问题：重点是两个函数：getForms（）和loadData（）

offTopics:presentLoading（）和this.filterData

ngOnInit() {
    this.presentLoading()
   //this.items2 = this.db.list('/forms').valueChanges();
   //this.items2.forEach(a=>console.log(a))
  }
  
  async presentLoading() {
    const loading = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
      showBackdrop:true,
      duration:2500
    });
    await loading.addEventListener('ionLoadingWillPresent', (event: any) => {
      this.getForms()
    firebase.auth().onAuthStateChanged(user=> {
      if (user) {
        this.db.object('/users/' + user.uid+"/control").snapshotChanges().subscribe(c=>this.control = c.payload.val()) 
      } else {
      }
    });
    });
    await loading.present();
    
     await loading.onDidDismiss().then(x=>this.c=true);
    console.log('Loading dismissed!');
  }
  getForms(){
    firebase.database().ref("/forms").orderByKey().limitToFirst(9).once("value",snap=>{snap.forEach(a=>{
      this.lastKey = a.key
      this.deneme.push({key: a.key, ...a.val() as {}})})}).then(c=>this.filterData = this.deneme).then(b=>this.filterData.sort((b, a) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()))
      
  }
  loadData(event) {
    console.log(this.lastKey)
    firebase.database().ref("/forms").orderByKey().startAt(this.lastKey).limitToFirst(9).once("value", snap => {
      console.log("girdi")
          event.target.complete();
          console.log(snap.numChildren())
          if (snap.numChildren() == 1) {
           
            this.infiniteScroll.disabled = true;
            this.isFinished = true;
          }
          else {
            snap.forEach(child => {
             
              if (this.lastKey != child.key) {
                this.lastKey = child.key;
                this.deneme.push({key: child.key, ...child.val() as {}});
                this.filterData = this.deneme
              }
            })
          }
         
        })
    }

---

这看起来不像是要实现无限滚动。你读过这个吗？是的，谢谢你的帮助。你做的看起来不像是要实现无限卷轴。你读过这个吗？是的，谢谢你的帮助