Question

我在使用firebase的离子2应用程序中无限滚动工作时遇到了麻烦。

这是我从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;

});

这是我的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>

我只是希望能够加载前十个...然后滚动加载另外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;

        });
    }

}

你的无限滚动处理程序显然是onInfiniteScroll（）

Answer 2

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

导入

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

<强>声明

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

Firebase呼叫

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

离子2＆amp; Firebase无限滚动

2 个答案: