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

Posted 2023-04-13

【中文标题】如何在Angular的`ngFor`中插入分隔符？

【英文标题】：How to insert divider in the `ngFor` in Angular?

【发布时间】：2021-01-07 22:40:26

【问题描述】：

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

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

例如这样的：

【问题讨论】：

你试过subsection.sectionName

这能回答你的问题吗？ horizontal line and right way to code it in html, css

【参考方案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

【参考方案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>