angular - Angular 4 *ngFor 每三列添加一个行 div

Question

我正在将 Angular 4 与bulma css 框架一起使用，我想知道如何每隔三列添加一个新行（或列类）。

打印出 0,1,2 0,1,2 等的索引变量是当我在使用引导程序时查看片段时。

注意到一些关于也许我可以使用模板语法但也没有让它工作的评论。

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

Answer 1

如下更改 *ngIf 中的条件。

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

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

Answer 2

以下解决方案对我有用：

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