如何使用angularFire 2对表格进行分页

时间:2017-06-18 16:32:14

标签: firebase firebase-realtime-database angularfire2

如何使用时间戳键为angularFire2分页表

我有2000个产品,我想展示从最新到最旧的Timestamp 10产品

每当用户点击下一步时,我想显示从最新到

的下10个项目

Firebase数据库/产品/产品

{
  "added_by" : "roussi@drop.com",
  "bought_price" : 0,
  "brand" : "Chicco",
  "custom_id" : "125790",
  "description" : "<h3><span style=\"font-size:12px\"><strong>Baby Moment</span></p>\n",
  "image_name" : "αρχείο λήψης.png",
  "image_path" : "/products/v7F9QZ1Uαρχείο λήψης.png",
  "sell_price" : 2.52,
  "time_created" : "18/5/2017",
  "timestamp" : 1497785930206,
  "title" : "Chicco - Baby Moments Μωρομάντηλα - 72τεμ.",
  "weight" : "0"
}

firebase.service.ts

  // orderBy = 'timestamp'

  getProducts(orderBy) {
    this.products = this.db.list('/products', { query: {
      orderByChild: orderBy,
      limitToLast: 8
    }}) as FirebaseListObservable<Product[]>;

    return this.products.map( (arr) => { return arr.reverse(); } );
  }

  getNextProducts(orderBy, first, last) {

    let firstKey;
    let lastKey;
    let lim;
    let pNum;


    this.products = this.db.list('/products', { query: {
      orderByKey: orderBy,
      startAt: last,
      // endAt: 10,
      limitToLast: 5
    }}) as FirebaseListObservable<Product[]>;

    return this.products;
    // return this.products.map( (arr) => { return arr.reverse(); } );
  }

products.component.ts

   // =============== ON INIT ================ //
  ngOnInit() {

    // set the default rows per page
    this.rowsPerPage = 10;

    this.firebaseService.getProducts('timestamp').subscribe(products => {

      this.Products = products;
      this.itemsShowing = products.length;

      console.log('getNextProducts start');
      console.log(this.Products);
      this.loadComplete = true;

      let firstElement;
      let lastElement;

      for (let i = 0; i < products.length; i++) {
        firstElement = products[0];
        lastElement  = products[i];

      }


      console.log('first element ' + firstElement.title);
      console.log('last element '  + lastElement.title);

      this.firstKey = firstElement.timestamp;
      this.lastKey  = lastElement.timestamp;


    });
}




  // =============== NEXT BUTTON ================ //
  next () {

    this.firebaseService.getNextProducts('timestamp', this.firstKey, this.lastKey).subscribe(products => {

      this.Products = products;

      let firstElement;
      let lastElement;

      for (let i = 0; i < products.length; i++) {
        firstElement = products[0];
        lastElement  = products[i];

      }

      console.log('first element ' + firstElement.title);
      console.log('last element '  + lastElement.title);

      this.firstKey = firstElement.timestamp;
      this.lastKey  = lastElement.timestamp;


      console.log('getNextProducts start');

    });

 }

0 个答案:

没有答案