代码之家 › 专栏 › 技术社区 › Ibrahim Azhar Armar

角度-每第三行添加一个div

angular

-1

Ibrahim Azhar Armar · 技术社区 · 6 年前

我想补充一下 <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被添加到每3行之后。我试着跟着条件

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

如何在循环中每隔3行添加clearfix div?

谢谢您。

5 回复 | 直到 6 年前

Kamil KieÅczewski 6 年前

将div clearfix更改为

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

Vega Stipe 6 年前

索引以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

Bijay Yadav 6 年前

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>

Zarna Borda 6 年前

将“i”作为for循环中的变量,它将从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>

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

5 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

5 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

5 月前

Jace Johnson · Typescript文件读取的变量类型错误

5 月前

Ole · Angular资源API是否支持为资源添加初始值?

5 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

5 月前