Angular 4 *ngFor adding a row div every third column

耗尽温柔 提交于 2019-11-30 15:50:32

问题


I am using Angular 4 with the bulma css framework and I am wondering how I can add a new row (or columns class) every third column.

The index variable which prints out 0,1,2 0,1,2 etc. was when I looking at a snippet when using bootstrap.

Noticed some comments on maybe I can use the template syntax but didn't get that to work either.

<div class="columns">
    <div class="column is-one-third" *ngFor="let item of items | async; let index = index">
      <app-item-details [item]='item '></app-item-details>
      {{ index % 3 }}
    <div class="is-clearfix" *ngIf="index % 3 == 0"></div>
  </div>
</div>

回答1:


change the condition in *ngIf as below.

*ngIf="(index + 1) % 4 == 0"

Plunker example : https://plnkr.co/edit/C0DrgY3Rty33ZRhyML7E?p=preview



来源:https://stackoverflow.com/questions/45714249/angular-4-ngfor-adding-a-row-div-every-third-column

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!