Question

我尝试在角度4中使用此tuto应用分页：http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google但是当我使用长度= 20或长度= 10或长度= 40的数组进行分页时出错我在分页中有一页...例如当我添加长度= 40的数组时，我添加了这个分页：

分页中有一页，当然一页中的所有数组都是因为我有一个分页

代码服务：

import { Injectable } from '@angular/core';
        import * as _ from 'underscore';

        @Injectable()
        export class PagerService {

          constructor() { }

          getPager(totalItems: number , currentPage: number = 1, pageSize: number =10) {
                // calculate total pages
                let totalPages = Math.ceil(totalItems / pageSize);
                let startPage: number, endPage: number;
                if (totalPages <= 10) {
                    // less than 10 total pages so show all
                    startPage = 1;
                    endPage = totalPages;
                } else {
                    // more than 10 total pages so calculate start and end pages
                    if (currentPage <= 6) {
                        startPage = 1;
                        endPage = 10;
                    } else if (currentPage + 4 >= totalPages) {
                        startPage = totalPages - 9;
                        endPage = totalPages;
                    } else {
                        startPage = currentPage - 5;
                        endPage = currentPage + 4;
                    }
                }

                // calculate start and end item indexes
                let startIndex = (currentPage - 1) * pageSize;
                let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

                // create an array of pages to ng-repeat in the pager control
                let pages = _.range(startPage, endPage + 1);
                // return object with all pager properties required by the view
                return {
                    totalItems: totalItems,
                    currentPage: currentPage,
                    pageSize: pageSize,
                    totalPages: totalPages,
                    startPage: startPage,
                    endPage: endPage,
                    startIndex: startIndex,
                    endIndex: endIndex,
                    pages: pages
                };
            }
        }

代码组件：

sz= ['Saab', 'Volvo', "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW", "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW"
  , "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW", "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW"
  , "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW"];

    constructor( public pagerService:PagerService) { }

    ngOnInit() {
        this.setPage(this.sz.length);
      });

    }

        setPage(page: number) {

          if (page < 1 || page > this.pager.totalPages) {
              return;
          }
          // get pager object from service
          this.pager = this.pagerService.getPager(this.dataBikes.length, page);

          // get current page of items
          this.pagedItems = this.sz.slice(0, this.sz.length);
      }

我的问题如何在一个页面中添加10项数组分页（代码组件中的数组长度为40 ..如何在此数组中创建4个页面）

感谢先进的

Answer 1

你有

let pages = _.range(startPage, endPage + 1);

那是：创建你正在使用“lodash”的数组。我说你没有“lodash”（这不是必须的，但你必须改变创建数组的方式）。您可以通过

替换之前的代码

let pages:number[]=[]
for (let i=startPage;i<=endPage;i++)
    pages.push(i);

angular4中的错误分页

1 个答案: