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>

哪个不起作用。作为一种解决方法，我可以在将项目列表传递给模板之前将其分解为块，但我认为它更优雅，让模板处理它 - 如果可以的话。

使用哪些正确的指令和语法？

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>

Answer 2

<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

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

2 个答案: