Angular 4 *ng 用于每三列添加一个行 div

sti*_*bay 6 ngfor bulma angular

我将 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>
Run Code Online (Sandbox Code Playgroud)

You*_*r M 4

更改 *ngIf 中的条件,如下所示。

*ngIf="(index + 1) % 4 == 0"
Run Code Online (Sandbox Code Playgroud)

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

  • 为什么 plunker 只说“正在加载...”?看不到你们中任何人在 html 上呈现的示例。我错过了什么吗? (4认同)