在 ngFor 中计数 - Angular 2
Counting up in ngFor - Angular 2
我在计算 Angular 中的 ngFor 循环时遇到问题 2。我正在尝试开发一个具有 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>
希望你能帮帮我。
干杯!
我会修改数据以表示您要呈现的结构(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>
如果您不想将数据结构格式化为列组(我可以理解),那么您仍然可以每行呈现 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>
就是这样。根据当前行索引切片管道呈现每行必要的项目。
您无需对数据进行任何更改! Ionic 2 已经提供了支持。
我们可以在<ion-row>
中使用wrap
。示例:<ion-row wrap>
Use the wrap attribute on an <ion-row>
element to allow items in that
row to wrap. This applies the flex-wrap: wrap;
style to the <ion-row>
element.
我在计算 Angular 中的 ngFor 循环时遇到问题 2。我正在尝试开发一个具有 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>
希望你能帮帮我。
干杯!
我会修改数据以表示您要呈现的结构(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>
如果您不想将数据结构格式化为列组(我可以理解),那么您仍然可以每行呈现 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>
就是这样。根据当前行索引切片管道呈现每行必要的项目。
您无需对数据进行任何更改! Ionic 2 已经提供了支持。
我们可以在<ion-row>
中使用wrap
。示例:<ion-row wrap>
Use the wrap attribute on an
<ion-row>
element to allow items in that row to wrap. This applies theflex-wrap: wrap;
style to the<ion-row>
element.