Angular 如何在ionic中使用*ngfor创建类似UI的互动程序

我正在尝试创建一个像模板一样的平铺

如何在ionic应用程序中创建如下图所示的tiles结构 home.html

编辑： 使用离子色谱柱的溶液

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

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

迭代所有服务以生成分片行

<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>

每个瓦片由一个标签和一个可以是CY4或COL8的类组成，如果我们考虑12列宽度的离子原理。

CSS类

.col8 { 
    width: 66%; 
}

.col4 { 
    width: 33%; 
}

最后，我迭代视图中的所有服务以生成分幅行：

<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>

.col8 { 
    width: 66%; 
}

.col4 { 
    width: 33%; 
}

<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>