[英]How to insert divider in the `ngFor` in Angular?
I have a subsection and I'm wondering how I can place html
divider between every subsection but not sure how to do that so I would be really appreciated if I can get any suggestion or help.我有一个小节,我想知道如何在每个小节之间放置
html
分隔符,但不确定该怎么做,所以如果我能得到任何建议或帮助,我将不胜感激。
<div>
<a mat-list-item *ngFor="let subsection of section.subSections" (click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
</a>
</div>
For example something like this:例如这样的事情:
You could use <hr>
tag to render horizontal lines and *ngFor
directive's last
local variable to avoid rendering the line after the last item.您可以使用
<hr>
标记来呈现水平线,并使用*ngFor
指令的last
局部变量来避免在最后一项之后呈现该行。
Try the following尝试以下
<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>
Working example: Stackblitz工作示例: Stackblitz
I created a sample for you on Stackblitz我在Stackblitz上为您创建了一个示例
You can use <hr>
like this:您可以像这样使用
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.