angular - 直接在 Ionic 2/Angular 2 模板中渲染项目网格

Question

我有一个要在 3 col * x 行网格中呈现的项目列表。我不确定如何在 Angular 2 或 Ionic 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>

这是行不通的。作为一种解决方法，我可以在将项目列表传递给模板之前将它们分成 block ，但我想让模板处理它会更优雅一些——如果可以的话。

要使用的正确指令和语法是什么？

Answer 1

我知道这是一篇旧文章，但是我想出了一种使用 ionic/angular 来完成这项工作的方法。

在行中放置换行，然后为每列提供 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>