angular2의 div 콘텐츠에 대한 페이지 매김을 추가하는 방법

Question

angular2의 div 콘텐츠에 대한 페이지 매김을 추가하고 p 태그로 div를 추가하는 방법. 단락으로 로그 목록을 표시하고 있습니다. 따라서 매 10 개의 p 태그마다 페이지 매기기를 추가하고 싶습니다.

<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/#/를 사용할 수 있습니다

여기 내 HTML 파일의 코드입니다.

는 사용법 : 나는 작업의 종류를 처리하기 위해 외부 라이브러리를 사용하고 찾을 수

<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 붙박이 태그입니다. 그에 따라 값을 전달하면됩니다. 페이지 요청 및 페이지 당 항목 요청 당 백엔드에서 지연로드를 사용하는 것이 좋습니다.