在 Angular 中为分页表格的每页最后一行添加样式

✅ 推荐方案一：利用 *ngFor 的 last 上下文变量（语义清晰、可控性强）

Angular 的 *ngFor 指令内置了多个模板上下文变量，其中 last 是一个布尔值，当当前迭代项为该次循环的最后一个元素时为 true。由于分页管道（如 paginate）会将当前页的数据作为独立数组传入 *ngFor，因此 last 在此处天然对应当前页的最后一行。

<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; }

✅ 优势：逻辑明确、可复用、支持动态样式切换（如结合 currentPage 做更复杂判断）、完全符合 Angular 数据驱动范式。

⚠️ 注意事项：

• 确保分页管道（如 ngx-pagination 的 paginate）返回的是当前页的切片数组（标准行为），而非原始数组引用；
• 若自定义分页逻辑未正确截取数据，last 将失效——建议始终通过 console.log(data) 验证实际渲染项数量；
• last 仅作用于当前 *ngFor 循环范围，无需担心跨页干扰。

✅ 方案二：CSS :last-of-type（简洁轻量，但有局限性）

若仅需基础样式且 dom 结构稳定，可直接在 CSS 中定位：

tbody tr:last-of-type {   background-color: #f5f5f5;   border-bottom: 2px dashed #9E9E9E; }

⚠️ 关键限制：

• :last-of-type 选取的是
  内最后一个
  元素，依赖渲染结果。它仅在当前页 DOM 中存在且无其他
  干扰时有效；

• 若表格含空行、加载占位符
  或服务端错误提示行，该选择器可能误选；

• 不适用于需要根据业务状态（如 data.isFinal）动态控制样式的场景；
• SSR（服务端渲染）或动态插入行时兼容性较弱。

? 总结与最佳实践

方案	推荐场景	可靠性	可维护性	动态能力
*ngFor + last + [ngClass]	生产环境、需精确控制、多主题适配	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	支持条件组合（如 last && data.status === ‘active’）
:last-of-type	快速原型、静态单页表格、无复杂交互	⭐⭐☆	⭐⭐⭐	仅静态样式，无逻辑扩展性

强烈建议优先采用方案一：它将分页语义与模板逻辑显式绑定，既符合 Angular 最佳实践，又具备良好的可测试性与可扩展性。同时，配合 OnPush 策略与纯函数式分页管道，还能进一步提升渲染性能。