Ionic 2 & Firebase Infinite Scrolling

Question

我在带有Firebase的Ionic 2应用程序中遇到无限滚动工作的问题。

这是我从数据库获取项目的代码

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;
});

这是我的网页

<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>

我只想要能够加载前十个..然后在滚动加载另一个 10 个等... 离子无限滚动似乎是我需要的，但它不适用于我的代码。

Answer 1

你的类看起来像这样(截断(：

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;
});
}
}

你的无限滚动处理程序显然在无限滚动((

Answer 2

对于 angular2/typescript ionic firebase 应用程序，下面的代码有效。 在组件中，

进口

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

宣

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

火力基地呼叫

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

滚动呼叫

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>

调用 getData(( 并在构造函数中注入 firebase。

private firebase: AngularFireDatabase