Ionic 3中如何用*ngFor获取解析后数组的全部内容？

云上老周

2026-5-6

解决方案：遍历分类下的全部产品

我来帮你搞定这个问题！你当前只能看到每个分类下的第一个产品，核心原因是模板里直接通过menu.products[0]硬取了数组的第一个元素，没有遍历整个menu.products数组。只需要在现有结构里再加一层*ngFor，就能展示分类下的所有产品了。

修改后的product.html代码

<ion-item-group *ngFor="let menu of products; let i = index">
  <!-- 可选：添加分类标题分隔栏，让界面结构更清晰 -->
  <ion-item-divider>
    <h3>{{menu.name}}</h3>
  </ion-item-divider>

  <!-- 遍历当前分类下的所有产品 -->
  <ion-item class="item-frame" *ngFor="let product of menu.products" (click)="view(product.id)" tappable>
    <div class="item-image" [style.background-image]="'url(' + product.image_path + ')'">
      <ion-row class="item-bar" align-items-center>
        <ion-col col-2 *ngIf="menu.type !== 'fb'">
          <ion-icon name="custom-hat"></ion-icon>
        </ion-col>
        <ion-col col-2 *ngIf="menu.type === 'fb'">
          <ion-icon name="custom-facebook"></ion-icon>
        </ion-col>
        <ion-col col>
          <h2>{{product.name}}</h2>
          <!-- 取消注释即可显示产品简介 -->
          <!-- <p>{{product.resume}}</p> -->
          <p>{{product.id}}</p>
        </ion-col>
      </ion-row>
    </div>
  </ion-item>
</ion-item-group>

关键改动说明

新增产品遍历层：在原有的分类遍历（*ngFor="let menu of products"）内部，给<ion-item>添加了*ngFor="let product of menu.products"，这样每个分类下的所有产品都会被循环渲染。
替换产品引用：把所有menu.products[0].xxx的写法改成product.xxx，因为现在product就是当前循环的单个产品对象。
可选优化：添加了<ion-item-divider>来显示分类名称，让界面层级更明确，如果不需要可以直接删除这部分代码。