代码之家 › 专栏 › 技术社区 › stibay

角度4*ng,用于每三列添加一行div

bulma ngfor angular

6

stibay · 技术社区 · 8 年前

bulma css framework 我想知道如何每隔三列添加一行(或列类)。

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

注意到一些关于我可以使用 template syntax

<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>

2 回复 | 直到 8 年前

1

4

Younis Ar M 8 年前

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

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

2

1

Abdullah 6 年前

以下解决方案适合我:

<div class="form-group">
    <div class="row">
        <div class="col-xl-4" *ngFor="let item of productimages; let index = index">
            <img [src]="item.image">
        </div>
    </div>
</div>