angular 2的分页无法设置每页的项目答案

【问题标题】：paginating with angular 2 unable to set items per pageangular 2的分页无法设置每页的项目
【发布时间】：2017-08-05 17:41:13
【问题描述】：

我为一个简单的分页组件安装了 ng2-bootstrap。从文档 (https://valor-software.com/ng2-bootstrap/#/pagination#pager-component) 来看，设置组件似乎很简单。

但是，我无法设置每页的项目。我按照示例并像这样导入了模块

    PaginationModule.forRoot(),

我添加了必要的属性

maxSize:number = 5;
bigTotalItems:number = 726;
bigCurrentPage:number = 1;
numPages:number = 0;
itemsPerPage: number = 10;  // **** this is the one not working

我添加了文档显示的选择器和属性

<pagination 
            class="pagination-sm"
            [totalItems]="bigTotalItems" 
            [(ngModel)]="bigCurrentPage" 
            [maxSize]="maxSize" 
            [boundaryLinks]="true" 
            [rotate]="false" 
            [itemsPerPage]="itemsPerPage"
            (numPages)="numPages = $event">
        </pagination>

所有内容都会显示，但页面不限于 10 个。所有内容都显示在一页上。

在节点模块/github页面（https://github.com/valor-software/ng2-bootstrap/blob/development/src/pagination/pagination.component.ts）的组件中，每个页面的项目都是这样构造的

this.itemsPerPage = typeof this.itemsPerPage !== 'undefined'
  ? this.itemsPerPage
  : this.config.itemsPerPage;

我确保我的分页选择器位于装饰器的正下方

*ngFor

我就是不知道为什么我无法正确设置 itemsPerPage。

【问题讨论】：

itemsPerPage: number =10; 而不是 -10
我的深夜类型。我的组件具有正确的语法。我将上面的答案更改为匹配。

标签： angular pagination ng2-bootstrap

【解决方案1】：

要从 ng2-bootstrap 上的 issue 继续此操作，您并没有说明如何根据分页组件的设置来划分数据以进行显示。分页组件是一种用于跟踪您希望如何将信息细分为页面并通知所需页面已更改的设备。它不会为您显示页面 - 您的代码有此责任。
issue 中引用的 plunker 显示了一种执行此操作的方法，其中根据所选页面和每页的项目数将数组中保存的信息子集馈送到显示器。它通过在 pageChanged 事件发生时调用一个函数来构建页面内容来实现这一点。
您还询问了 itemsPerPage

【讨论】：