如何获取最后一个孩子* ng用于组件列表

Question

我有一个名为“用户列表”的组件。该组件内部有* ngFor目录用户组件。

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

我需要最后一个目录用户卡组件具有不同的样式。因此，我尝试在父组件上使用last-child，但没有成功。

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

有什么想法吗？

Answer 1

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

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

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