アイテムのグリッドを直接イオン2 /角度2のテンプレートにレンダリングする

Question

私は3 col * xの行グリッドでレンダリングしたいアイテムのリストを持っています。私は角2またはイオン性2.今しばらくhttps://angular.io/docs/ts/latest/guide/template-syntax.html#を読んであることにそれを行う方法がわからないんだけど、ここで私がやったことです：

<ion-grid> 
<ion-row *ngIf="i%3 == 0" #i> 
    <ion-col width-33 *ngFor="let item of items; let i=index" > 
    <ion-card> 
    <img src="{{item.image}}" /> 
     <ion-card-content> 
     <ion-card-title> 
      {{item.title}} 
     </ion-card-title> 
     <p></p> 
     </ion-card-content> 
    </ion-card> 
    </ion-col> 
    </ion-row> 
</ion-grid> 

動作しません。回避策として、アイテムのリストをテンプレートに渡す前に塊に分割することはできますが、それができる場合はテンプレートが処理できるように少しエレガントになると思います。

正しいディレクティブと構文は何ですか？

Answer 1

<ion-content class="has-header"> 
    <div style=" display: flex; flex-wrap: wrap; align-items: stretch;"> 
    <div *ngFor="#s of items; let i = index" style="flex: 0 0 calc(100%/3 - 2px);"> 
     <img src="http://placehold.it/150x150" padding>{{i}} 
    </div> 
    </div> 
</ion-content> 

ここ

http://plnkr.co/edit/8lbKDG?p=info

Answer 2

私はしかし、私は角/イオンを使用して、この作品を持ってする方法を働いた、古いポストこのことを知っているフレックスボックス...

参照くださいplunkerを使用。

行に折り返しを配置し​​、各列に4つの基本単位（col-4）の幅を指定すると、 の効果が得られ、そのすべてが宣言されます。

注：グリッドにはデフォルトで12列あります。 col-6は2列、col-3は4列などを与える。

<ion-row wrap> 
    <ion-col col-4 *ngFor="let image of imageList" (tap)="setAvatar(image)"> 
     <img [src]="image"> 
    </ion-col> 
    </ion-row>