Angular中如何判断表格每页最后一条记录并添加CSS样式

方法1：使用Angular *ngFor内置的last变量 #

Angular的*ngFor指令自带last模板变量，可直接判断当前项是否为循环的最后一项。由于paginate管道返回的是当前页的数据集，这个last变量会精准对应当前页的最后一条记录，不管是满页10条还是最后一页的2条都适用。

修改你的表格行代码：

<tbody>
  <tr *ngFor="let data of List | paginate : { itemsPerPage: 10, currentPage: p };
              let i = index; let last = last"
      [class.last-page-row]="last">
    
    <td>{{ data.Name }}</td>
    <td></td>
    ...
  </tr>
</tbody>

在组件的CSS/SCSS中定义目标样式：

.last-page-row {
  /* 示例样式，可按需调整 */
  background-color: #f5f5f5;
  border-bottom: 3px solid #333;
}

方法2：通过分页结果临时变量判断（备选） #

如果需要更灵活的逻辑控制，可以将分页后的数据集赋值给临时变量，通过索引和数据集长度判断最后一项：

<tbody>
  <tr *ngFor="let data of (currentPageData = List | paginate : { itemsPerPage: 10, currentPage: p });
              let i = index"
      [class.last-page-row]="i === currentPageData.length - 1">
    
    <td>{{ data.Name }}</td>
    <td></td>
    ...
  </tr>
</tbody>

对应的CSS样式与方法1一致。

两种方法都能准确识别当前页的最后一条记录，方法1更简洁，推荐优先使用。

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