如何在 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>
您可以嘗試為 ion-col 添加大小並將 *ngFor 放入 ion-col 本身。一個例子可以是:
如您所見,我使用了尺寸 4,以便 1 行內可以容納 3 列(最多 12 列,因此 12/4 = 3)。 希望對您有幫助!