在 ngFor 中递增计数 - Angular 2

Question

我有一个问题，需要在Angular 2中计算ngFor循环。 我正在尝试开发一个具有3列和动态行数的网格。 我想要循环遍历我的数组，并从左到右添加元素，每三个元素就应该跳转到下一行。 我正在使用Ionic Framework 2.0。

我的代码如下：

   <ion-row *ngFor="#m of movies; #i = index"  (click)="movieTapped(m)">
        <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
                {{m.Title}} <br>
                Rating:     {{m.imdbRating}}<br>
                Rated:      {{m.Rated}}<br>
                Released:   {{m.Year}}<br>
            </div>
        </ion-col>
        <ion-col  width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
         <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
  </ion-row>

希望你能帮助我。

谢谢！

- Jonas

Answer 1

如果您不想将数据结构格式化为列组（我可以理解），则仍然可以每行呈现3列。为此，您需要预先计算其他辅助行索引数组，例如[0,1,2,3]。数组中的元素数量应等于您要呈现的ion-row数量。因此，在控制器构造函数中，您可以执行以下操作：

this.rows = Array.from(Array(Math.ceil(this.movies.length / 3)).keys())

然后在模板中，您将有两个ngFor循环：

<ion-row *ngFor="#i of rows" (click)="movieTapped(m)">
  <ion-col *ngFor="#m of movies | slice:(i*3):(i+1)*3" width-33>
    <div class="row responsive-md">
      <img [src]="m.Poster" width="100%" /> {{m.Title}}
      <br> Rating: {{m.imdbRating}}
      <br> Rated: {{m.Rated}}
      <br> Released: {{m.Year}}
    </div>
  </ion-col>
</ion-row>

就是这样。根据当前行索引，管道切片会渲染每一行所需的项目。

这里是简化演示：http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

- dfsq

---

非常感谢！这正是我正在寻找的。 - Jonas

这正是我所需要的。棒极了！ - bones.felipe

对于那些使用VueJS的人，<ion-row v-for="r in rows" v-bind:key="r"> <ion-col v-for="item in items.slice((r*3), (r+1)*3)" v-bind:key="item.id" - Mohammed A. Al Jama

Answer 2

你不需要对数据进行任何更改！Ionic 2 已经提供了支持。

我们可以在 中使用 wrap。例如： 源代码请参考：这里

在 元素上使用 wrap 属性，使该行中的项目可以换行。这将在 元素上应用 flex-wrap: wrap; 样式。

- Gowri

---

好的、简单的解决方案，之前不知道。 - Maarten Heideman

Answer 3

我会修改数据以表示您想要呈现的结构（3列行），然后根据数据呈现视图。

<ion-row *ngFor="let r of rows; let i = index"  (click)="movieTapped(m)">
    <ion-col width-33 *ngFor="let m of r; let j = index">
        <div class="row responsive-md">
            <img [src]="m.Poster" width="100%" />
            {{m.Title}} <br>
            Rating:     {{m.imdbRating}}<br>
            Rated:      {{m.Rated}}<br>
            Released:   {{m.Year}}<br>
        </div>
    </ion-col>
</ion-row>

- Günter Zöchbauer