本文详解在 Angular 中结合 ngx-pagination 实现分页表格时，如何准确判断并为每页的最后一条数据行（而非整个列表末尾）添加 CSS 样式，提供模板级条件绑定与 CSS 选择器两种可靠方案。
本文详解在 angular 中结合 `ngx-pagination` 实现分页表格时，如何准确判断并为每页的最后一条数据行（而非整个列表末尾）添加 css 样式，提供模板级条件绑定与 css 选择器两种可靠方案。
在使用 ngx-pagination（如 paginate 管道）对表格进行分页渲染时，一个常见但易被误解的需求是：为“当前页的最后一行”添加特殊样式（例如加粗边框、背景高亮或底部阴影）。注意，这并非指整个数据源 List 的最终一条记录，而是每页显示范围内的逻辑末尾行——例如每页 10 条，第 1 页的第 10 行、第 2 页的第 2 行（当总数据为 12 条时）均需被识别。
Angular 的 *ngFor 指令原生支持多个上下文变量，其中 let last = last 是关键突破口。它会在循环到当前页最后一条被渲染的项时返回 true，该值由 paginate 管道动态计算得出（基于 itemsPerPage 和 currentPage），完全匹配分页上下文。
✅ 推荐方案一：模板中使用 [ngClass] 动态绑定（语义清晰、可控性强）
在
<tbody>
<tr *ngFor="let data of List | paginate: { itemsPerPage: 10, currentPage: p }; let last = last"
[ngClass]="{ 'page-last-row': last }">
<td>{{ data.Name }}</td>
<td>{{ data.Email }}</td>
<!-- 其他列 -->
</tr>
</tbody>对应定义 CSS 类：
.page-last-row {
border-bottom: 3px solid #2196F3;
font-weight: 600;
}⚠️ 注意事项：
- last 变量仅在 *ngFor 内部有效，且严格依赖于管道输出的子数组长度；
- 确保 paginate 管道已正确导入并注册（如 NgxPaginationModule）；
- 若需兼容旧版 Angular 或自定义分页逻辑，应避免依赖全局 CSS 伪类（见方案二局限）。
✅ 方案二：纯 CSS 方式（简洁但有约束）
利用 :last-of-type 伪类选择器定位当前
tbody tr:last-of-type {
background-color: #f8f9fa;
border-bottom: 2px dashed #007bff;
}此方法无需修改模板，但存在两个重要限制：
- 仅适用于单 结构 —— 若表格含多组
（如分组表头），可能误选；
- 不感知分页状态 —— 当前页若因筛选/排序导致实际渲染行数不足 itemsPerPage，last-of-type 仍生效，但语义上仍是“本页末行”，实践中多数场景可接受。
? 总结建议：
- 优先采用 方案一（[ngClass] + last）：语义明确、调试直观、易于扩展（如后续需触发事件或动态禁用按钮）；
- 避免使用 index === List.length - 1 或 i === (p * 10) - 1 等硬编码逻辑，它们无法适配分页边界变化；
- 如需对“全量数据最后一行”额外标记，可叠加 let i = index; let length = count 并配合 i === length - 1 判断，实现双重样式控制。
