2 ионных предмета в один ряд и 3-й справа
Я генерирую динамические элементы с помощью ngFor, я хочу, чтобы два элемента отображались подряд. Но я получаю только один. Если я использую два ионных элемента в div, они удваиваются. 
. Мне нужен 1-й элемент сверху, 2-й элемент внизу 1-го и 3-й элемент справа от 1-го и 4-й внизу 3-го.
Мой код
<div class="scroll_container">
<div class="list_inner" *ngFor="let item of featuredRest;let i =index;" (click)="openMenu(item)">
<ion-item (click)="items()">
<div class="item_inner d-flex">
<div class="img_box center_img">
<img src={{item.cover}} class="crop_img">
</div>
<div class="text_box">
<h3>{{item.name}}</h3>
<h4>{{item.status}}</h4>
<h4 class="d-flex">
<ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
{{item.dist}} km | City Food Park
</h4>
</div>
</div>
</ion-item>
<ion-item (click)="items()">
<div class="item_inner d-flex">
<div class="img_box center_img">
<img src={{item.cover}} class="crop_img">
</div>
<div class="text_box">
<h3>{{item.name}}</h3>
<h4>{{item.status}}</h4>
<h4 class="d-flex">
<ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
{{item.dist}} km | City Food Park
</h4>
</div>
</div>
</ion-item>
</div>
</div>
Стиль
.scroll_container {
width: 100%;
white-space: nowrap;
overflow-x: auto;
.list_inner {
display: inline-block;
margin: 0 12px;
&:first-child {
margin-left: 20px;
}
&:last-child {
margin-right: 20px;
}
}
}
ion-item {
--inner-padding-end: 0px;
--inner-min-height: unset !important;
--padding-start: 0;
--background: var(--transparent) !important;
background: var(--white);
margin-bottom: 20px;
.item_inner {
align-items: flex-start !important;
.img_box {
min-width: 68px;
height: 68px;
margin-right: 12px;
border-radius: 3px;
}
.text_box {
width: 100%;
h3 {
margin: 0;
font-size: 1rem;
color: var(--text-black);
padding-bottom: 6px;
padding-top: 3px;
}
h4 {
margin: 0;
color: var(--text-light);
font-size: 0.7rem;
font-weight: 400;
margin-bottom: 9px;
letter-spacing: 0.3px;
align-items: flex-start;
ion-icon {
min-width: 16px;
padding: 0 2px;
font-size: .8rem;
}
}
h5 {
margin: 0;
color: var(--primary);
font-size: .73rem;
font-weight: 400;
margin-bottom: 7px;
letter-spacing: .3px;
ion-icon {
min-width: 16px;
padding: 0 2px;
font-size: .8rem;
}
}
}
}
}
Я попытался поставить ngif(i%2)==0 для второго ионного элемента и наоборот для первого ионного элемента. Даже я получаю все элементы в одной строке.
Код с ngIf
<div class="list_inner" *ngFor="let item of featuredRest;let i =index;"> (click)="openMenu(item)">
<ion-item (click)="items()" *ngIf="i%2 != 0">
<div class="item_inner d-flex">
<div class="img_box center_img">
<img src={{item.cover}} class="crop_img">
</div>
<div class="text_box">
<h3>{{item.name}}</h3>
<h4>{{item.status}}</h4>
<h4 class="d-flex">
<ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
{{item.dist}} km | City Food Park
</h4>
</div>
</div>
</ion-item>
<ion-item (click)="items()" *ngIf="i%2==0">
<div class="item_inner d-flex">
<div class="img_box center_img">
<img src={{item.cover}} class="crop_img">
</div>
<div class="text_box">
<h3>{{item.name}}</h3>
<h4>{{item.status}}</h4>
<h4 class="d-flex">
<ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
{{item.dist}} km | City Food Park
</h4>
</div>
</div>
</ion-item>
</div>
1 ответ
Проблема в том, что вы используете два ионных элемента в своем коде. Используйте один. Попробуйте код ниже.
<div class="scroll_container">
<div class="list_inner" *ngFor="let item of featuredRest;let i =index;" (click)="openMenu(item)">
<ion-item (click)="items()">
<div class="item_inner d-flex">
<div class="img_box center_img">
<img src={{item.cover}} class="crop_img">
</div>
<div class="text_box">
<h3>{{item.name}}</h3>
<h4>{{item.status}}</h4>
<h4 class="d-flex">
<ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
{{item.dist}} km | City Food Park
</h4>
</div>
</div>
</ion-item>
</div>
</div>