Как вставить разделитель в ngFor в Angular?

У меня есть подраздел, и мне интересно, как я могу разместить разделитель html между каждым подразделом, но не знаю, как это сделать, поэтому я был бы очень признателен, если бы я мог получить какое-либо предложение или помощь.

<div>
    <a mat-list-item *ngFor="let subsection of section.subSections" (click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
    </a>
</div>

Например что-то вроде этого:

введите здесь описание изображения


angular divider angular-ngfor
person Aase Zi    schedule 21.09.2020    source источник
comment
вы пробовали ‹элемент мат-списка *ngFor=let подраздел section.subSections›{{subsection.sectionName}}‹hr /› ‹/a› ?   -  person pbachman    schedule 21.09.2020
comment
Отвечает ли это на ваш вопрос? горизонтальная линия и правильный способ ее кодирования в html , CSS   -  person Heretic Monkey    schedule 21.09.2020

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать тег <hr> для отображения горизонтальных линий и локальную переменную директивы *ngFor last для избегайте рендеринга строки после последнего элемента.

Попробуйте следующее

<div>
  <a *ngFor="let subsection of section.subSections; let last=last"
    (click)="navigateToSubsection(section.id,subsection.id)">
    {{ subsection.sectionName }}
    <hr *ngIf="!last" class="solid">
  </a>
</div>

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

person Michael D    schedule 21.09.2020

arrow_upward
3
arrow_downward

Я создал для вас пример на Stackblitz

Вы можете использовать <hr> следующим образом:

<div clas="main-container" *ngFor="let subsection of section.subSections>
   <a mat-list-item"
    (click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
   </a>
   <hr/>
</div>
person ng-hobby    schedule 21.09.2020