Firestore分页角度

Question

我正在尝试对我的页面进行分页.

网址:https://pettemm.github.io/angular/home

Url代码:https://github.com/pettemm/angular

这是抓取我的物品的服务:

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, 
AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import { Item } from '../models/item';


    @Injectable()
    export class ItemService {

    itemsCollection: AngularFirestoreCollection<Item>;
    items: Observable<Item[]>;
    itemDoc: AngularFirestoreDocument<Item>;

    constructor(public afs: AngularFirestore) { 

    this.itemsCollection = this.afs.collection('items', ref => 
    ref.orderBy('title','desc'));

this.items = this.itemsCollection.snapshotChanges().map(changes => {
return changes.map(a =>{
  const data = a.payload.doc.data() as Item;
  data.id = a.payload.doc.id;
  return data;
  });
});
}

getItems(){
return this.items;    
   }

这是我的组成部分:

   import { Component, OnInit } from '@angular/core';
   import { ItemService } from '../../services/item.service';
   import { Item } from '../../models/item';

   @Component({
   selector: 'app-items',
   templateUrl: './items.component.html',
   styleUrls: ['./items.component.css']
   })


    export class ItemsComponent implements OnInit {
    items: Item[];
    editState: boolean = false;
    itemToEdit: Item;

    constructor(private itemService: ItemService) { }

    ngOnInit() {
    this.itemService.getItems().subscribe(items => {     
    this.items = items;
    });
    }

在第一页首页我正在使用firebase,我想分页所以我只有2个项目,然后你可以点击下一个显示另外两个.我知道startAt和endAt,但无法弄清楚如何使用它.

在另一边垫和训练我正在使用firestore.当我在家和垫之间交换并再次回到家时,物品不会更新,为什么？

Answer 1

您必须在下订单后执行此操作

 this.itemsCollection = this.afs.collection('items', ref => 
        ref.orderBy('title','desc').starAt(x).endAt(x);

或者

 this.itemsCollection = this.afs.collection('items', ref => 
    ref.orderBy('title','desc').endAt(x);

X项目的索引在哪里