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

希望你能帮助我.

干杯!

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

Answer 2

您无需对数据进行任何更改!Ionic 2已经为它提供了支持.

我们可以使用wrapin <ion-row>.例:<ion-row wrap>

资源

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