在ngFor-Angular 2中计数

我在计算Angular 2中的ngFor Loop时遇到了问题。我试图开发一个有3列和动态数量的行的网格。我想遍历我的数组，并从左到右添加元素，每三个元素都应该跳到下一行。我使用Ionic Framework 2.0。在ngFor-Angular 2中计数

我的代码如下所示：

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

希望你能帮助我。

干杯！

来源

2016-03-08 Jonas

如果你不想你的数据结构格式化成列组（这我可以理解），那么你仍然可以呈现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

来源

2016-03-08 16:47:30 dfsq

非常感谢你！这正是我正在寻找的 – Jonas

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

我会修改数据以表示要渲染的结构（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>

来源

2016-03-08 14:26:03

你不必做数据中的任何改变！ Ionic 2已经提供了它的支持。

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

Source

使用<ion-row>元件上的涡卷属性，以允许在该行项包裹。这将flex-wrap: wrap;样式应用于元素<ion-row> 元素。

来源

2016-08-26 13:04:39 Gowri

美好的结局简单的解决方案不知道 –

在ngFor-Angular 2中计数

回答

相关问题