使用AngularFire2分頁

我正在構建一個使用Firebase並使用AngularFire2的Ionic2項目。使用AngularFire2分頁

從AngularFire2文檔，我能得到的東西，如：

const queryObservable = af.database.list('/items', { 
    query: { 
    orderByChild: 'size', 
    equalTo: subject 
    } 
});

這種運作良好。我有大約300-400條記錄，但我無法在一次API調用中完成所有記錄。所以我正在嘗試實施分頁。我嘗試了很多東西。我想實現是this：

StartAt(), endAt()

我試圖通過查詢對象通過它，但沒有奏效。 AngularFire2是否有這個實現？如果不是，我如何獲取Firebase參考，以便我可以編寫自己的實現？

來源

2016-09-28 harikrish

根據他們的source code，AngularFire2支持startAt和endAt。這裏是你將如何基於與size一個子鍵列表上限制查詢：

let queryObservable = this.af.database.list('/items', { 
    query: { 
    orderByChild: 'size', 
    startAt: 50, 
    endAt: 100 
    } 
});

這應該把所有具有50之間界定的size一個子鍵到100

注意，該項目我注意到，如果我要將參考對象傳入AngularFire2而不是參考路徑，查詢將不工作工作！所以下面的代碼仍然會返回項目列表，但它不會被正確排序。

let ref = firebase.database().ref('/items'); 
this.af.database(ref, { query: { orderByChild: 'size' } });

來源

2016-09-29 06:03:12 Caleb

如果你不能簡單計數的db行，你怎麼做分頁？而且，workarround一次帶來所有數據，那麼爲什麼要再次用開始/結束限制來查詢呢？我錯過了什麼？ – Hllink

其中一種方法是使用'order'的子鍵，它是一個增量計數器0,1,2,3等。然後，您可以使用'orderByChild：'order''，'startAt：10'和'endAt ：19'獲取條目10-19的第2頁。 – Caleb

非常好的解決方案，謝謝分享：D – Hllink

我看着在blog post這個問題最近，但你帶來了一個有趣的邊緣情況下你總的查詢會比你想拉大。我會用與以前相同的方法來解決這個問題，但是要實現一個起點，並以一個limitToLast結束。此外，您使用從rxjs導入的BehaviorSubjects，因爲它們將允許您獲取當前值並增加一定量。實施例

let firstKey = new BehaviorSubject(''); // import 'rxjs/BehaviorSubject' 
let nextKey = new BehaviorSubject(''); 
let pageSize = new BehaviorSubject(10); 

let queryObservable = this.af.database.list('/items', { 
query: { 
    orderByKey: true, 
    startAt: firstKey, 
    limitToFirst: pageSize 
} 
});

現在你有一個不斷移動的窗口開始與所述第一密鑰和使用按鍵作爲正在排序上的值。例如，爲了能夠更改密鑰，您需要將密鑰存儲在特定位置。

queryObservable.subscribe((data) => { 
    // angularfire2 adds a $key property to each result in an array 
    // Does not handle the edge case at the end of the list 
    if (data.length === pageSize.getValue()) { 
    nextKey.next(data.$key); 
    } 
});

要增大和減小窗口，只需將firstKey值更改爲nextKey的值即可。

firstKey.next(nextKey.getValue());

你可以做各種各樣的巧妙的事情，比如添加多頁，還是回去用小的調整頁面以這種方法。這與添加必須在數據庫中維護的字段相反，在某些情況下這可能很麻煩。

來源

2016-11-25 14:49:07 Andrew

當我嘗試檢索數據時，我的$ key始終未定義。爲什麼是這樣？ – nareeboy

我還需要對Angular 2和Firebase進行簡單的分頁（Next和Previous）。

我的解決方案是查詢列表itemPerPage + 1中的一個額外項目，並將其作爲參考。然後使用startAt和endAt選項，我可以使用參考項目在我的數據上分頁和上一頁。

我創建了一個Gist來顯示我的解決方案，希望它可以幫助。

來源

2017-03-17 09:24:43

使用AngularFire2分頁

回答

相關問題