Ionic 3, как показать данные из массива в строке и столбце?

Question

У меня есть данные в массиве. Мне нужно показать в 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>

Это должно отобразить элементы в двух столбцах