Ionic 3：如何遍历购物车商品对象获取cart_id与product_id

嘿，作为Ionic新手碰到这种键是动态唯一标识的嵌套对象，确实会有点懵，我来给你一步步讲清楚怎么遍历并展示每个商品的cart_id和product_id！

第一步：把API返回的对象转换成数组 #

Angular的*ngFor指令只能遍历数组，而你的API返回的items是一个对象（键是商品唯一标识，值是商品详情），所以我们需要先把这个对象转换成数组格式。

在你的购物车组件（比如cart.page.ts）里，处理API响应数据：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.page.html',
  styleUrls: ['./cart.page.scss'],
})
export class CartPage implements OnInit {
  // 用来存储转换后的商品数组
  cartItems: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.fetchCartData();
  }

  fetchCartData() {
    // 替换成你的实际API接口地址
    this.http.get('https://your-api-url/cart').subscribe((response: any) => {
      const rawCartItems = response.items;

      // 用Object.entries把对象转成键值对数组，再提取需要的字段
      this.cartItems = Object.entries(rawCartItems).map(([uniqueId, item]) => {
        return {
          uniqueId: uniqueId, // 商品的唯一标识（比如29.2.2.0.YTowOnt9）
          cartId: item.cart_id,
          productId: item.product_id
          // 如果你需要其他字段，比如orderitem_type，也可以在这里添加
        };
      });
    });
  }
}

也可以用Object.keys的方式实现同样的效果，看你个人习惯：

this.cartItems = Object.keys(rawCartItems).map(uniqueId => {
  const item = rawCartItems[uniqueId];
  return {
    uniqueId,
    cartId: item.cart_id,
    productId: item.product_id
  };
});

第二步：在Ionic模板中用卡片循环展示 #

现在我们已经有了可以遍历的数组，接下来在cart.page.html里用ion-card和*ngFor来渲染每个商品：

<ion-content class="ion-padding">
  <!-- 循环遍历cartItems数组，每个item对应一个商品 -->
  <ion-card *ngFor="let item of cartItems" class="mb-3">
    <ion-card-header>
      <ion-card-title>商品标识: {{ item.uniqueId }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p><strong>购物车ID:</strong> {{ item.cartId }}</p>
      <p><strong>商品ID:</strong> {{ item.productId }}</p>
      <!-- 这里可以添加更多你需要展示的商品字段 -->
    </ion-card-content>
  </ion-card>

  <!-- 如果购物车为空，展示提示 -->
  <div *ngIf="cartItems.length === 0" class="text-center ion-margin-top">
    <p>购物车是空的，快去挑选商品吧！</p>
  </div>
</ion-content>

关键知识点解释 #

• Object.entries()：这个方法会把对象转换成一个包含键值对的二维数组，比如你的items对象会被转成[[唯一标识1, 商品详情1], [唯一标识2, 商品详情2]]的格式，方便我们提取需要的数据。
• *ngFor：Angular的结构型指令，用来循环遍历数组并生成对应的DOM元素，这里就是每个商品对应一张卡片。

这样就能完美把API返回的购物车商品信息展示在Ionic的卡片里啦！

内容的提问来源于stack exchange，提问作者Gokulanathan KN