Question

我正在尝试在<div class="clearfix"></div>中的每第三行添加ngFor

这就是我的做法

<ng-container *ngFor="let foodMenu of item['food_menus']; index as i;">
    <div class="col-sm-4 food-menu-col"></div>
    <div *ngIf="i % 3 == 0" class="clearfix"></div>
</ng-container>

这确实会在每第3行添加一次，但是也会在第一行之后添加，代码会生成以下html。

<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>

通知已添加为第二行。我想跳过它。我希望在每第3行之后添加clearfix div。我尝试遵循条件

<div *ngIf="i > 1 && i % 3 == 0" class="clearfix"></div>

使用此方法，将第一个clearfix div添加到第5行，然后每3行添加一次。

我该如何在循环的第3行中添加clearfix div？

谢谢。

Answer 1

将div clearfix更改为

<div *ngIf="i % 3 == 2" class="clearfix"></div>

Answer 2

索引以0开头，这就是为什么索引不是三分之一。试试这个：

<ng-container *ngFor="let foodMenu of [1,2,3,4,5,6,7]; index as i;">
    <div class="col-sm-4 food-menu-col">{{foodMenu}}</div>
    <div *ngIf="(i + 1 )% 3 == 0" class="clearfix">I am added only every third one</div>
</ng-container>

demo

Answer 3

根据您的要求。您要在第三行添加div。

只需将index as i;替换为let i = index + 1;。

<ng-container *ngFor="let foodMenu of item['food_menus']; let i = index + 1;">
   <div class="col-sm-4 food-menu-col"></div>
<div *ngIf="i % 3 == 0" class="clearfix"></div>

Answer 4

在循环中将“ i”作为变量，它将从1开始值“ i”。

<ng-container *ngFor="let element of item; let i;">
  <div class="col-sm-4 food-menu-col"></div>
  <div *ngIf="i % 3 == 0" class="clearfix"></div>
</ng-container>

角度-每3行添加div

4 个答案: