以下是一个使用Angular实现分页的示例代码:
{{ item }}
export class AppComponent {
items: any[] = []; // 所有数据
pagedItems: any[] = []; // 当前页的数据
currentPage: number = 1; // 当前页码
pageSize: number = 10; // 每页显示的数据量
constructor() {
// 初始化数据
for (let i = 1; i <= 100; i++) {
this.items.push('Item ' + i);
}
// 初始化当前页的数据
this.setPage(1);
}
setPage(page: number) {
// 计算当前页的数据的索引范围
let startIndex = (page - 1) * this.pageSize;
let endIndex = Math.min(startIndex + this.pageSize - 1, this.items.length - 1);
// 获取当前页的数据
this.pagedItems = this.items.slice(startIndex, endIndex + 1);
// 更新当前页码
this.currentPage = page;
}
}
export class AppComponent {
// ...
get totalPages(): number {
return Math.ceil(this.items.length / this.pageSize);
}
get pages(): number[] {
return Array.from({ length: this.totalPages }, (_, i) => i + 1);
}
}
通过以上步骤,你可以实现一个简单的Angular分页功能,将一个数组按照每页指定的数据量进行分页,并在页面上显示当前页的数据和分页按钮。
上一篇:Angular分页器问题
下一篇:Angular分页只显示第一页