在 ngFor 中计数 - Angular 2

Posted 2023-02-22

【中文标题】在 ngFor 中计数 - Angular 2

【英文标题】：Counting up in ngFor - Angular 2

【发布时间】：2016-06-22 12:56:14

【问题描述】：

我在计算 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"  />
                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"  />
            </div>
         </ion-col>
         <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster"  />
            </div>
         </ion-col>
  </ion-row>

希望你能帮帮我。

干杯！

【参考方案1】：

您不必对数据进行任何更改！ Ionic 2 已经为其提供了支持。

我们可以在<ion-row> 中使用wrap。示例：<ion-row wrap>

Source

在 <ion-row> 元素上使用 wrap 属性以允许其中的项目 要换行的行。这会将flex-wrap: wrap; 样式应用于<ion-row> 元素。

【讨论】：

不知道的好端简单解决方案

【参考方案2】：

我会修改数据以表示您要渲染的结构（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"  />
            m.Title <br>
            Rating:     m.imdbRating<br>
            Rated:      m.Rated<br>
            Released:   m.Year<br>
        </div>
    </ion-col>
</ion-row>

【参考方案3】：

如果您不想将数据结构格式化为列组（我可以理解），那么您仍然可以每行呈现 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"  /> 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

【讨论】：

非常感谢！这正是我想要的

这正是我所需要的。好东西。

对于那些使用 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"