angular - 单行 2 个离子项目，右侧第 3 个

Question

我使用 ngFor 生成动态项目，我希望两个项目连续显示。但我只得到一个。如果我在 div 中使用两个 ion-items，它会加倍。. 我需要顶部的第 1 项，第 1 项底部的第 2 项和第 1 项右侧的第 3 项和第 3 项底部的第 4 项。

我的代码

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

Answer 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>