Ionic 2 & Firebase Infinite Scrolling

Question

Ich habe Probleme mit unendlich scroll Arbeit in meiner ionic 2 App mit Firebase.

Dies ist mein Code aus die Einzelteile zu bekommen db

this.itemRef = firebase.database().ref('/Terms'); 

this.itemRef.on('value', itemList => { 
    let items = []; 
    itemList.forEach(item => { 
    items.push(item.val()); 
    return false; 
    }); 

    this.itemList = items; 
    this.loadeditemList = items; 

}); 

Das ist mein html

<ion-content padding class="list"> 
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 
<ion-list> 
<ion-item *ngFor="let item of itemList | orderBy: order" (click)="detailsSelected($event, item)" > 
    <h2> {{ item.title }} </h2> 
    <p> {{ item.desc }} </p> 

</ion-item> 
</ion-list> 
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
<ion-infinite-scroll-content></ion-infinite-scroll-content> 
</ion-infinite-scroll> 

Ich möchte nur die Möglichkeit, die ersten zehn zu laden .. dann auf Last scroll weitere 10 etc ... die Ion-Infinite-Scroll scheint zu sein, was ich brauche, aber es funktioniert nicht mit meinem Code.

Answer 1

Ihre Klasse wie diese (abgeschnitten) aussehen:

class YourCmp { 
    limit: number = 10; 

    constructor() { 
     this.itemRef = firebase.database().ref('/Terms').orderByChild('timestamp'); // or however you mark time 
     this.itemRef.limit(this.limit).once('value', itemList => { 
      let items = []; 
      itemList.forEach(item => { 
      items.push(item.val()); 
      return false; 
      }); 

      this.itemList = items; 
      this.loadeditemList = items; 

     }); 
    } 

    onInfiniteScroll(event) { 
     this.limit += 10; // or however many more you want to load 
     this.itemRef.limitToFirst(limit).once('value', itemList => { 
      let items = []; 
      itemList.forEach(item => { 
      items.push(item.val()); 
      return false; 
      }); 

      this.itemList = items; 
      this.loadeditemList = items; 

     }); 
    } 

} 

Und Ihre unendliche Scroll-Handler ist offensichtlich onInfiniteScroll()

Answer 2

Für angular2/Typoskript ionische Firebase App, den Code unten gearbeitet. In der Komponente,

Import

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 

Deklarieren

limit: number = 10; 
itemRef:FirebaseListObservable<any[]>; 
itemList:any; 
loadeditemList:any; 

Firebase Anruf

getData(){ 
    this.itemRef = this.firebase.list('quote', { 
     query: { 
      orderByChild: 'title', 
      limitToFirst:this.limit 
     } 
    }); 
} 

Scroll Anruf

onInfiniteScroll($event:any) { 
    this.limit += 10; 
    this.getData(); 
    this.itemRef.forEach((itemList:any) => { 
    let items:any = []; 
    itemList.forEach((item:any) => { 
     items.push(item); 
     return false; 
    }); 

    this.itemList = items; 
    this.loadeditemList = items; 

    $event.state = "closed"; 
    }); 
} 

HTML

<ion-list> 
... 
</ion-list> 

<ion-infinite-scroll (ionInfinite)="onInfiniteScroll($event)"> 
    <ion-infinite-scroll-content></ion-infinite-scroll-content> 
</ion-infinite-scroll> 

Anruf getData() und Feuerbasis in Konstruktor injizieren.

private firebase: AngularFireDatabase