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

如何为angular2中的div内容添加分页，并使用p tag添加div。我将日志列表显示为段落。因此，我想为每10行p标记添加分页。如何在angular2中为div内容添加分页

这里是我的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>

来源

2017-04-10 vasantha

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

用法：

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

来源

2017-04-10 11:50:01 Jigarb1992

我能找到使用外部库来处理这种任务的最简单的方法，NG2 Pagination似乎一个简单而完整的方法来处理这个任务。

只需检查文档以了解如何轻松实现它。

来源

2017-04-10 11:50:01 Sakuto

谢谢你的回复...我跟着这个链接：http：//plnkr.co/edit/JVQMPvV8z2brCIzdG3N4？p = preview 但这里的问题是我没有config.js文件或systemjs.config.js文件，因为我使用的是webstorm IDE。那么如何为我的问题添加config.js文件代码。 – vasantha

您的项目是基于Angular-CLI吗？您正在使用的IDE不会影响该项目。 – Sakuto

是的，我只使用Angular-CLI。 IDE是webstorm。你能否建议我在这方面出了什么问题。我不清楚你的意思。 – vasantha

使用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是内置的标签。你只需要相应地传递值。根据页面请求和每页项目请求，最好在后端使用延迟加载。

来源

2017-10-14 17:29:06

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

回答

相关问题