在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>
希望你能帮助我。
干杯!
答
如果你不想你的数据结构格式化成列组(这我可以理解),那么你仍然可以呈现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>
就是这样。根据当前行索引,切片管道会为每行渲染必要的项目。
答
我会修改数据以表示要渲染的结构(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>
答
你不必做数据中的任何改变! Ionic 2已经提供了它的支持。
我们可以在<ion-row>
中使用wrap
。例如:<ion-row wrap>
使用
<ion-row>
元件上的涡卷属性,以允许在该 行项包裹。这将flex-wrap: wrap;
样式应用于元素<ion-row>
元素。
+0
美好的结局简单的解决方案不知道 –
非常感谢你!这正是我正在寻找的 – Jonas
这正是我所需要的。好东西。 –