如何在离子中使用* ngfor创建类似于UI的图块

Question

我正在尝试创建像模板这样的图块

我如何将以下图像创建图块结构到我的ionic应用程序home.html中

<ion-row responsive-sm wrap>
   <ion-col   *ngFor="let item of allservices ;let i = index " [ngClass]="
   {'col1':i==0}">
   <img src={{item.icon}} />
   <div class="myOverlay">
   <div class="card-title">San Francisco</div>
   <div class="card-subtitle">72 Listings</div>
   </div>
   </ion-col>
</ion-row>

Answer 1

编辑：
使用Ionic ion-col溶液。

如果项目必须占用宽度的66％，则将其属性col8设置为true。 如果不存在该属性，则该项目将占用剩余空间（即，如果该行的另一个项目具有col8属性，则为宽度的33％）。

allservices = [
  [{label:'Academic', col8:true}, {label:'School'}],
  [{label:'Circular'}, {label:'Attendance'}, {label:'Home'}],
  [{label:'Progress'}, {label:'Class', col8:true}]
];

迭代allservices以生成图块行

<ion-row *ngFor="let row of allservices">
  <ng-container *ngFor="let item of row">
    <ion-col style="padding:1px;" [attr.col-8]="item.col8">
      <div class="tile">{{item.label}}</div>
    </ion-col>
  </ng-container>
</ion-row>

用ion-col演示

---

不使用Ionic ion-col溶液。

首先， allservices是一个数组数组。 阵列的第一级用于图块的行，阵列的第二级用于图块。

allservices = [
  [{label:'Academic', class:'col8'}, {label:'School', class:'col4'}], // first row
  [{label:'Circular', class:'col4'}, {label:'Attendance', class:'col4'}, {label:'Home', class:'col4'}], // second row
  [{label:'Progress', class:'col4'}, {label:'Class', class:'col8'}] // third row
];

如果考虑12 columns width Ionic principle ，则每个图块col4一个标签和一个类组成，该类可以为col4或col8 。

CSS类

.col8 { 
    width: 66%; 
}

.col4 { 
    width: 33%; 
}

最后，我对allservices中的allservices进行迭代以生成tile的行：

<ion-row *ngFor="let row of allservices">
  <div *ngFor="let item of row" class="{{item.class}}" style="padding:1px;">
    <div class="tile">{{item.label}}</div>
  </div>
</ion-row>

不带离子col的演示