如何在 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>

例如这样的事情：

Answer 1

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

Answer 2

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

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

How to insert divider in the `ngFor` in Angular?

divider

angular

angular-ngfor