我有一个名为用户列表的组件。在这个组件中有目录用户组件的 *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;
}
有什么想法吗?
最佳答案
您可以使用 *ngFor
- last
变量来检查元素是否是最后一个元素。
如果它是循环的最后一个元素,那么 last
变量将变为 true,因此我们可以使用 [ngClass]
添加/删除类。
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;
}
关于css - 如何获取最后一个子 *ngFor 组件列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56903462/