Angular表格分页：如何结合slice与页码索引实现每页10条展示？

直接解决方案 #

把slice参数写成 slice: clickedIndex * 10 : (clickedIndex + 1) * 10 即可，Angular的slice管道会自动处理最后一页数据不足10条的情况，无需额外判断边界。

代码示例 #

模板代码（HTML）

先修正slice管道的语法（正确写法是| slice: start:end，而非括号形式）：

<tr *ngFor="let cus of customers | slice: clickedIndex * 10 : (clickedIndex + 1) * 10">
  <!-- 表格列内容 -->
</tr>

TS代码

初始化clickedIndex为0，确保默认展示第一页：

clickedIndex = 0; // 默认对应第1页

clickPage(page: IPaginator) {    
  this.clickedIndex = page.pageIndex;
}

原理说明 #

• 点击第1页时，clickedIndex=0，slice范围是0:10，展示前10条数据；
• 点击第2页时，clickedIndex=1，slice范围是10:20，展示第11-20条；
• 到最后一页时，比如总数据有55条，clickedIndex=5对应的结束值是6*10=60，此时slice会自动截断到customers.length（即55），不会出现数组越界问题。

内容的提问来源于stack exchange，提问作者Moe-Doe