如何在angular2中为div内容添加分页答案

【问题标题】：How to add pagination for div content in angular2如何在angular2中为div内容添加分页
【发布时间】：2017-10-24 12:57:47
【问题描述】：

如何为angular2中的div内容和带有p标签的div添加分页。我将日志列表显示为段落。所以我想为每10行p标签添加分页。

这是我的html文件代码：

<div id="default_log" class="col-md-12" *ngIf="hidediv" >
   <div id="top-padding">{{servername}} &nbsp; &nbsp; {{logType}} &nbsp; 
   &nbsp; <a id="close" class="closeButton" (click)="onclick()"></a></div>
      <div id="stuff">
         <p *ngFor="let defaultLogItem of defaultLogItems">
         {{defaultLogItem.logList}}</p>
         </div>
         </div>

【问题讨论】：

标签： angular pagination

【解决方案1】：

我能找到的最简单的解决方案是使用外部库来处理此类任务，NG2 Pagination 似乎以简单而完整的方式处理此任务。

只需查看文档即可了解如何轻松实现它。

【讨论】：

谢谢您的回复...我已关注此链接：plnkr.co/edit/JVQMPvV8z2brCIzdG3N4?p=preview 但这里的问题是我没有 config.js 文件或 systemjs.config.js 文件，因为我正在使用 webstorm IDE。那么如何为我的问题添加 config.js 文件代码。
你的项目是基于 Angular-CLI 的吗？您使用的 IDE 不会影响项目。
是的，我只使用 Angular-CLI。 IDE是webstorm。你能告诉我这有什么问题吗？我没有清楚地告诉你。

【解决方案2】：

您可以使用http://michaelbromley.github.io/ng2-pagination/#/ 进行分页。

用法：

<element *ngFor="let item of collection | paginate: { id: 'foo',
                                                      itemsPerPage: pageSize,
                                                      currentPage: p,
                                                      totalItems: total }">...</element>

【讨论】：

【解决方案3】：

使用 ngx-pagination，因为 ng2-pagination 已弃用。请通过以下链接：https://www.npmjs.com/package/ng2-pagination

只需在您的 Angular 应用程序中添加 npm install ngx-pagination --save library。

*ngFor="let item of collection | paginate: { id: 'foo',
                                                  itemsPerPage: pageSize,
                                                  currentPage: p,
                                                  totalItems: total }">

itemsPerPage、currentPage、totalItems 是内置标签。您只需要相应地传递值。最好根据页面请求和每个页面请求的项目在后端使用延迟加载。

【讨论】：