Как получить последний дочерний * 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 станет истинной, поэтомумы можем использовать [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;
}