如何在Angular的`ngFor`中插入分隔符？

Question

我有一个小节，想知道如何在每个小节之间放置html分隔符，但不确定该怎么做，如果能得到任何建议或帮助，我会非常感激。

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

例如像这样的内容：

- user9436741

---

你尝试过使用 <a mat-list-item *ngFor="let subsection of section.subSections">{{subsection.sectionName}}<hr /> </a> 吗？ - pbachman

这个回答解决了你的问题吗？水平线和在HTML、CSS中正确编码的方法 - Heretic Monkey

Answer 1

您可以使用<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

- ruth

Answer 2

我在 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>

- ng-hobby