[英]How to add pagination in angular project using ngx-pagination and show it's status
你的問題在哪里,你能提供更多的細節嗎?
這里的解決方案
Stackblitz - 我的項目
組件.html
<div class="text-center">
<h1>ngx-pagination live demo</h1>
</div>
<div class="list">
<ul
*ngFor="
let item of collection | paginate: { itemsPerPage: 10, currentPage: p };
let ndx = index
"
>
<li>
{{ item }}
</li>
</ul>
<div class="text-center">Showing {{start==null?1:start }} - {{last==null?10:last}} of 100 results</div>
<pagination-controls
(pageChange)="listCount($event)"
(pageChange)="p = $event"
></pagination-controls>
</div>
app.component.css
:host {
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.text-center {
text-align: center;
}
.list {
max-width: 550px;
margin: auto;
}
li {
margin-bottom: 5px;
}
app.component.ts
import { Component } from '@angular/core';
import { Console } from '@angular/core/src/console';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
collection = [];
start;
last;
constructor() {
for (let i = 1; i <= 100; i++) {
this.collection.push(`item ${i}`);
}
}
listCount(count) {
this.start = count
this.start = this.start * 10 - 9
this.last = count * 10
if (this.last > this.collection.length) {
this.last = this.collection.length;
}
console.log('start'+ ' '+this.start + ' '+'last' + ' '+ this.last);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.