角度的Firestore分页

Posted 2023-03-10

【中文标题】角度的Firestore分页

【英文标题】：Firestore pagination in angular

【发布时间】：2018-06-11 10:00:22

【问题描述】：

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

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

代码网址：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。当我在 home 和 mat 之间切换并再次返回 home 时，项目不会更新，为什么？

【参考方案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 是项目的索引