Нарисуйте линию между div, используя ngFor в Angular

Question

<div class="block" *ngFor="let item of items; let i = index">
  <p>Hey</p>
</div>

У меня есть директива ngFor, как указано выше. Теперь я хочу провести прямую линию между элементами, отображаемыми в директиве. Весь пример кода, который я видел, пытается сделать это между двумя состояниями c div с использованием svg или canvas. Есть ли простой способ добиться этого?

Answer 1

Рассмотрим CSS подход.

Вы можете рисовать линии между элементами, исключая последний, используя селектор :not и :last-child.

.block:not(:last-child) {
  border-bottom: 1px solid grey;
}

<div>
  <div class="block">
    <p>Hey</p>
  </div>
  <div class="block">
    <p>Hey</p>
  </div>
  <div class="block">
    <p>Hey</p>
  </div>
</div>

Answer 2

Включите border-bottom свойство в вашем "блоке" CSS селектор.

.block {
  border-bottom: 1px solid black;
}

Рабочий пример: Stackblitz

Обновление:

Если вы не хотите добавлять его в селектор «блок», включите дополнительный селектор, как показано ниже. Кроме того, поскольку это разделитель между div компонентами, вы также можете удалить строку после последней div.

Шаблон:

<div class="block" *ngFor="let item of items; let i = index; last as isLast">
  <p>Hey</p>
  <div *ngIf="!isLast">
    <div class="divider"><div>
  </div>
</div>

CSS:

.divider {
  border-bottom: 1px solid black;
}

Рабочий пример: Stackblitz