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

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

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>