Извлечь сетку элементов непосредственно в шаблоне Ionic 2/Angular 2

Question

У меня есть список элементов, которые я хотел бы сделать в сетке 3 col * x rows. Я не знаю, как сделать это в Угловая 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> 

использование гибкого коробка ...

см plunker здесь

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

Answer 2

Я это знаю, старый пост, но я разработал способ, чтобы эту работу с помощью ионного/угловой ,

Размещение обертки в ряду, а затем предоставление каждой колонки шириной 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>