如何在Ionic Angular中结合*ngFor实现响应式网格布局？

要实现响应式网格布局，核心是将*ngFor绑定到<ion-col>上，同时利用Ionic网格的响应式尺寸属性控制不同屏幕下的列数，具体实现如下：

完整代码示例 #

<ion-grid>
  <ion-row>
    <!-- 每个产品对应一个ion-col，通过size属性设置响应式宽度 -->
    <ion-col *ngFor="let prod of displayedList" 
             size-xs="12" 
             size-sm="6" 
             size-md="4" 
             size-lg="3">
      <ion-item 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>

响应式逻辑说明 #

Ionic的size-*属性用于控制不同断点下的列宽度：

• size-xs="12"：超小屏幕（手机竖屏），每行仅显示1个产品
• size-sm="6"：小屏幕（手机横屏），每行显示2个产品
• size-md="4"：中等屏幕（平板），每行显示3个产品
• size-lg="3"：大屏幕（桌面），每行显示4个产品

额外优化（可选） #

如果需要调整列间距或自定义样式，可以添加CSS：

.item-entry {
  margin-bottom: 1rem;
  border-radius: 8px;
}

内容的提问来源于stack exchange，提问作者Paweł Jarmarek