我正在尝试构建一个 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>
最佳答案
您可以使用 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>
关于html - 如何在 *ngFor 中每 3 个元素后添加一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51849997/