Angular - 每第三行添加一个 div

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>

这确实每第三行添加一次，但它也在第一行之后添加，代码生成以下 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>

通知已添加为第二行。我想跳过它。我希望在每第三行之后添加clearfix div。我尝试了以下条件

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

使用这个，第一个clearfix div被添加到第5行，然后在每第3行之后。

如何在循环中每第三行添加clearfix div？

谢谢。

Answer 1

将 div clearfix 更改为

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