angular - 带有firebase实时数据库的离子无限滚动

Question

我是 ionic 新手，我不知道如何进行无限滚动。我阅读了一些文件但不明白这是我的主页https://prnt.sc/usjd2r。我想要的是在 15-20 项之后，无限滚动起作用并出现新的 15-20 项。

这是我的主页.ts：

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.allForms=[]
    this.mainS.getAllForms().subscribe(x=>{this.allForms = x 
    this.allForms.sort((b, a) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())
    this.filterData = this.allForms
    })
    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!');
  }

获取所有表单：

getAllForms(){
   return this.db.list('/forms/' ).snapshotChanges().pipe(map(changes => changes
     .map(c => ({key: c.payload.key, ...c.payload.val() as {}}))));
 }

这是主要的html：

<ion-content *ngIf="c" >
  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredLocations($event)"></ion-searchbar>
<ion-grid >

  <ion-row>
    <ion-col size="12" size-sm="8" offset-sm="2" text-center>
      <ion-list>
        <ion-item *ngFor="let forms of filterData" >
          <ion-thumbnail slot="start">
            <ion-img [src]="forms.pp" (click)="openModel(forms.who)"></ion-img>
          </ion-thumbnail>
          <ion-label >
            <h5>{{forms.name}}</h5>
          </ion-label>
          <ion-label >
            <h5>{{forms.place}}</h5>
          </ion-label>
          <ion-label >
            <h5>{{forms.startDate}}</h5>
            
          </ion-label>
          <ion-button  slot="end" (click)="goFor(forms.key)" fill="clear">
            <ion-icon name="arrow-forward-outline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

标签： angularionic-frameworkfirebase-realtime-database

Answer 1

我解决了自己的问题：重要的两个函数：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
              }
            })
          }
         
        })
    }