如何在 *ngFor 中的每 3 个元素之后添加一个 div答案

【问题标题】：How to add a div after every 3 elements in *ngFor如何在 *ngFor 中的每 3 个元素之后添加一个 div
【发布时间】：2023-03-20 20:52:01
【问题描述】：

我正在尝试构建一个 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>

【问题讨论】：

标签： html angular ngfor

【解决方案1】：

这不应该是脚本的任务，而是 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>

【讨论】：

你也可以通过 CSS 网格来做到这一点
是的。除了出于布局目的使用脚本之外的任何内容。

【解决方案2】：

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

【讨论】：

这回答了问题，但值得注意的是*ngIf="(_i % 3) == 0" 将在第一个 app-small-book-view 之后和之后的每三个元素之后创建一个 div，而不是在第三个 app-small-book-view 之后创建一个 div。想要的。这是因为索引是从零开始的和(0 % 3) == 0。您可能希望 *ngIf="(_i % 3) == 2" 在每三个元素之后添加一个 div。