css - 如何获取最后一个子 *ngFor 组件列表

Question

我有一个名为用户列表的组件。在这个组件中有目录用户组件的 *ngFor。

<directory-user-card *ngFor="let directoryUser of directoryUsers"
  [directoryUser]="directoryUser">

我需要最后一个 directory-user-card 组件有不同的风格。所以我尝试在父组件中使用 last-child 但没有成功。

directory-user-card :last-child{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

有什么想法吗？

Answer 1

您可以使用 *ngFor - last 变量来检查元素是否是最后一个元素。

如果它是循环的最后一个元素，那么 last 变量将变为 true，因此我们可以使用 [ngClass] 添加/删除类。

Angular Docs

Github Issue ，其中讨论了处理此问题的正确方法。

<directory-user-card *ngFor="let directoryUser of directoryUsers; let last = last"
  [directoryUser]="directoryUser" [ngClass]="{'last-child': last}">

.last-child{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}