Angular 4 *ngFor 每三列添加一个行 div答案

【问题标题】：Angular 4 *ngFor adding a row div every third columnAngular 4 *ngFor 每三列添加一个行 div
【发布时间】：2023-04-03 03:05:01
【问题描述】：

我正在使用带有bulma css framework 的 Angular 4，我想知道如何每第三列添加一个新行（或列类）。

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

注意到一些 cmets，也许我可以使用 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>

【问题讨论】：

ng-if = *ngIf
请在您的问题中提供预期的输出，因为我不明白您的意思。
是的，我注意到我输入了 *ngIf 错误，但那是用于引导程序 sn-p 所以没想到在使用 bulma 框架时它会起作用。（它也没有帮助）我需要的是在循环中每隔三个项目将我的结果包装在一个新的列类周围。
与此处相同：stackoverflow.com/questions/27211799/… 但使用 bulma 和 angular 4

标签： angular ngfor bulma

【解决方案1】：

如下更改 *ngIf 中的条件。

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

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

【讨论】：

我认为 OP 希望在每 3 次之后添加一个 div，在第一次迭代后在您的 plunker 中，每 4 次之后添加行。所以，我对您的 plunker 进行了一些调整：)跨度>
为什么 plunker 只说loading... ??看不到在 html 上呈现的任何你们示例。我错过了什么吗？

【解决方案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>

【讨论】：