* ngДля угловой ионной решетки - PullRequest
Новая
       21

* ngДля угловой ионной решетки

0 голосов
/ 06 мая 2018

Я новичок в разработке. Я пытаюсь нарисовать строку с 2 ячейками, каждая из которых содержит категорию 

<ion-grid>
<ion-row *ngFor="let categorie of categories">
  <ion-col>
    <img [src]="categorie.image" />
  </ion-col>
  <ion-col>
    <img [src]="categorie.image" />
  </ion-col>
</ion-row>

То, что я получаю, и это, очевидно, одна и та же категория в обеих клетках. Я получил около 20 категорий, поэтому должно быть 10 строк, 20 ячеек.

Обновление

Абдельхман Хуссьен, согласно вашему комментарию, желаемый результат будет в моем случае:

КОЛИЧЕСТВО Категории: 21 или даже больше

РЕЗУЛЬТАТ: 11 рядов Каждая строка, содержащая 2 категории Последняя строка содержит только 1 категорию, даже если в последнем ряду еще 2 ячейки.

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Попробуйте этот код. У меня это сработало. 

<ion-grid>
            <ion-row no-padding>
              <ion-col col-6 *ngFor="let categorie of categories">
                      <img [src] ="categorie.image" />
              </ion-col>
            </ion-row>
</ion-grid>

Сетка в ионном состоит из 12 столбцов. Поэтому, если ваше изображение занимает 6 столбцов, вы получите желаемый результат.

https://ionicframework.com/docs/v3/components/#grid

https://ionicframework.com/docs/v3/api/components/grid/Grid/

0 голосов
/ 14 мая 2018

(Размещено решение от имени автора вопроса).

Благодаря комментарию для группировки в два сегмента сделано следующее. 

    <ion-grid class="grid-categories">
    <ion-row *ngFor="let categorie of categories; let i = index" >
      <ion-col *ngIf="i % 2 == 0" >
        <img [src]="categorie.image" />
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-grid class="grid-categories">
    <ion-row *ngFor="let categorie of categories; let i = index" >
      <ion-col *ngIf="i % 2 != 0" >
        <img [src]="categorie.image" />
      </ion-col>
    </ion-row>
  </ion-grid>

добавление небольшого количества ccs 

.grid-categories {
    width: 40%;
    float: left;
    border: red solid;
}

Это рисует именно так, как я хотел.

...