Question

我正在尝试建立一个有角度的项目。在我的项目中，我想显示一本书的清单，我有一本书的SmallBookView组件，并且我想使用ngFor来显示许多其他书。但是，每三本书之后，我需要添加一个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>

Answer 1

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

Answer 2

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

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

2 个答案: