如何在 ionic Angular 和 ngfor 中制作响应式网格？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何在 ionic Angular 和 ngfor 中制作响应式网格？

P粉106715703 2023-09-14 22:57:49

[JavaScript讨论组]

753

如何在 ionic Angular 和 ngfor 中制作响应式网格？就像这里一样在此输入图像描述

我的网格模板：

<ion-grid>
  <ion-row>
    <ion-col>
        <ion-item *ngFor="let prod of displayedList" class="item-entry" detail routerLink="/tabs/tab1/prod-detail/{{ prod.id }}">
          <ion-thumbnail>
            <ion-img [src]="prod.images[0].src" alt="{{ prod.name }}"></ion-img>
          </ion-thumbnail>
          <ion-label>
            <h3 class="item-name">{{ prod.name }}</h3>
            <ion-text>
              <p class="price">{{ prod.price | currency:"GBP" }}</p>
            </ion-text>
          </ion-label>
        </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

我尝试建议这个网格，但我不知道如何在 ngFor 循环中显示它。

<ion-grid>
  <ion-row>
    <ion-col>1</ion-col>
    <ion-col>2</ion-col>
    <ion-col>3</ion-col>
  </ion-row>
</ion-grid>

P粉106715703

全部回复(1)

P粉4137042452023-09-15 16:57:17 1楼

您可以尝试为 ion-col 添加大小并将 *ngFor 放入 ion-col 本身。一个例子可以是：

<ion-col sizeXs="4" *ngFor="let element of elements">
   <ion-item>...</ion-item>
</ion-col>

如您所见，我使用了尺寸 4，以便 1 行内可以容纳 3 列（最多 12 列，因此 12/4 = 3）。希望对您有帮助！

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>