如何在*ngFor中每3个元素后添加div
如何在*ngFor中每3个元素后添加div
提问于 2018-08-15 05:27:09
我正在尝试构建一个angular项目。在我的项目中，我想要显示一个图书列表，我有一个用于单个图书的SmallBookView组件，并且我想使用ngFor来显示许多其他图书。/然而，在每3本图书之后，我需要添加一个div来分隔这些图书，最后应该是这样的
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<div class="clearfix"> </div>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<div class="clearfix"> </div>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<div class="clearfix"> </div>div分隔ui中的每一行书籍。我试着像这样使用ngFor
<app-small-book-view *ngFor="let i of [1,2,3,4,5,6,7]; let _i = index">
<div class="clearfix" *ngIf="(_i % 3) == 0"></div>
</app-small-book-view>但这只是在SmallBookView内部添加div，而不是在它们之间添加div，如何在components>之间添加此div？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-15 05:30:15
您可以使用ng-container对多个组件进行分组，而无需容器渲染。
<ng-container *ngFor="let i of [1,2,3,4,5,6,7]; let _i = index">
<app-small-book-view></app-small-book-view>
<div class="clearfix" *ngIf="(_i % 3) == 0"></div>
</ng-container>Stack Overflow用户
发布于 2018-08-15 05:33:36
这不应该是脚本的任务，而是CSS的任务：
app-small-book-view:nth-child(3n)::after {
/*the clearfix thing*/
content: "";
clear: both;
display: table;
}因此，您的标记将只是线性的子项序列：
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51849997
复制相关文章
相似问题