Question

如何为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>

Answer 1

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

用法：

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

Answer 2

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

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

Answer 3

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

只需在角度应用中添加npm install ngx-pagination --save library即可。

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

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

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

3 个答案: