Ionic 3如何在行和列中显示数组中的数据?

问题描述 投票:0回答:1

我有数组中的数据。我需要在2行和列中显示。在数据中他们是4阵列。但有时会是3或2。所以我需要像附加一样设计。

enter image description here

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

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

angular ionic-framework ionic3
1个回答
0
投票

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

这应该在两列中显示元素

© www.soinside.com 2019 - 2024. All rights reserved.