Angular中PrimeNG p-table懒加载分页异常：首次加载丢失前10行

你的问题根源很明确：错误计算了分页偏移量。PrimeNG的TableLazyEvent中，first字段本身就是当前页起始数据的索引偏移量——第一页加载时first为0，第二页为10，第三页为20，以此类推。你之前的event.first + event.rows会直接跳过前rows条数据，自然看不到第一页内容。

修正后的核心代码 #

直接使用event.first作为接口的offset参数即可：

nextWarnings$: Observable<WholeEarlyWarningsPaginatedList> | undefined;

loadNextWarnings(event: TableLazyEvent) {
    const pageSize = event.rows || 10; // 给默认分页大小，避免空值
    this.nextWarnings$ = this.warningService.earlyWarningsList({
        offset: event.first, // 直接用first作为偏移量
        limit: pageSize,
    });
}

更完善的分页实现建议 #

如果后续需要扩展功能，可以补充以下细节：

• 处理排序与过滤：如果你的API支持，把event.sortField、event.sortOrder、event.filters等参数传递给后端，实现排序和过滤后的分页
• 添加加载状态：可以在请求前后设置一个isLoading布尔值，避免用户重复触发分页请求
• 边界值校验：比如当event.first小于0时强制设为0，避免传递非法参数给API

内容的提问来源于stack exchange，提问作者Unearthly