Angular 4 * ng用于每三列添加一行div [英] Angular 4 *ngFor adding a row div every third column

问题描述

我正在将Angular 4与 bulma css框架一起使用，我想知道如何添加新行(或列类)每三列.

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.

打印出0、1,2、0、1,2等的索引变量是当我查看

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>

推荐答案

在* ngIf中更改条件，如下所示.

change the condition in *ngIf as below.

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

插播示例: https://plnkr.co/edit/C0DrgY3Rty33ZRhyML7E?p=preview

这篇关于Angular 4 * ng用于每三列添加一行div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！