直接在Ionic 2/Angular 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

我知道这是一个旧帖子,但是我找到了一种使用离子/角度来完成这项工作的方法.

将包裹放在行中,然后为每列提供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>