离子3如何显示行和列中的数组数据？

Question

我在数组中有数据。我需要在2行和2列中显示。 在数据中，它们是4数组。但有时会是3或2。所以我需要像附件那样设计。

<ion-list *ngFor="let f of f1"> {{f.name}} {{f.age}}</ion-list>

这是我在列表中显示的方式，但需要显示为附件。

Answer 1

放入CSS文件：

ion-list.twocolumns {
  display: inline-block;
}

ion-list.twocolumns ion-item {
  float: left;
  list-style: outside none none;
  width: 50%;
}

然后像这样更改HTML：

<ion-list class="twocolumns">
    <ion-item *ngFor="let f of f1"> {{f.name}} {{f.age}} </ion-item>
</ion-list>

这应该在两个列中显示元素