Ionic3中如何遍历嵌套数组及对象内的数组？

Hey there! Let's tackle that frustrating [object Object] issue you're seeing when trying to display your nested product data in Ionic 3. The problem happens because you're trying to render complex nested structures (arrays inside arrays, arrays inside objects) directly without drilling down to their actual properties. Let's break this down step by step.

First, Let's Clarify the Data Structure #

Based on your description, your product data likely looks something like this (I'll use a realistic example):

// Sample nested product data matching your description
productList = [
  // First item: an array of products
  [
    { id: 1, name: "Organic T-Shirt", details: ["Cotton", "Unisex", "Size M"] },
    { id: 2, name: "Linen Shorts", details: ["Breathable", "Size L", "Beige"] }
  ],
  // Second item: an object containing a category and nested product array
  {
    categoryName: "Footwear",
    products: [
      { id: 3, name: "Running Shoes", details: ["Mesh Upper", "Cushioned Sole", "Size 10"] },
      { id: 4, name: "Flip Flops", details: ["Waterproof", "EVA Material", "Size 9"] }
    ]
  }
];

Step 1: Add a Helper Method to Check Array Type #

In your page's TypeScript file, add a simple helper to check if an item is an array (Angular templates can't use Array.isArray directly):

// Inside your Page component class
isArray(item: any): boolean {
  return Array.isArray(item);
}

Step 2: Correct HTML Template Traversal #

Use nested *ngFor directives and conditionals to handle both array-in-array and object-with-nested-array cases. This way, you'll never see [object Object] again—you'll render actual product details:

<!-- Your page's HTML template -->
<ion-content padding>
  <h2>Product List</h2>

  <!-- Iterate over the outer top-level array -->
  <div *ngFor="let item of productList" class="product-group">
    <!-- Case 1: Item is an array of products -->
    <div *ngIf="isArray(item)">
      <h3>Featured Products</h3>
      <!-- Iterate over the inner product array -->
      <ion-card *ngFor="let product of item">
        <ion-card-header>{{ product.name }}</ion-card-header>
        <ion-card-content>
          <p>ID: {{ product.id }}</p>
          <h4>Details:</h4>
          <ul>
            <!-- Iterate over the product's nested details array -->
            <li *ngFor="let detail of product.details">{{ detail }}</li>
          </ul>
        </ion-card-content>
      </ion-card>
    </div>

    <!-- Case 2: Item is an object with a nested products array -->
    <div *ngIf="!isArray(item) && item.products">
      <h3>{{ item.categoryName }}</h3>
      <!-- Iterate over the object's products array -->
      <ion-card *ngFor="let product of item.products">
        <ion-card-header>{{ product.name }}</ion-card-header>
        <ion-card-content>
          <p>ID: {{ product.id }}</p>
          <h4>Details:</h4>
          <ul>
            <li *ngFor="let detail of product.details">{{ detail }}</li>
          </ul>
        </ion-card-content>
      </ion-card>
    </div>
  </div>
</ion-content>

Step 3: Fix Your Data Fetching Method #

Let's clean up your getInitiallyCategoryProducts method (note the typo fix: Categort → Category) to ensure data is properly assigned and debuggable:

getInitiallyCategoryProducts(categoryKeyId: string, subCategoryKeyId: string) {
  // No need for `self = this` if you use arrow functions!
  this.yourProductApiService.getProducts(categoryKeyId, subCategoryKeyId)
    .subscribe(
      (response: any) => {
        this.productList = response;
        // Always log the data to confirm its structure matches your expectations
        console.log("Fetched product data:", this.productList);
      },
      (error) => {
        console.error("Error loading products:", error);
      }
    );
}

Debugging Tip #

If you're still unsure about your data structure, use Angular's json pipe to print the raw data in your template temporarily:

<!-- Add this somewhere in your template to inspect data -->
<pre>{{ productList | json }}</pre>

This will show you the exact nested structure, making it easy to adjust your *ngFor logic.

Why You Saw [object Object] #

When you try to render an object directly (like {{ item }}), Angular converts it to a string, which defaults to [object Object]. You always need to access specific properties (like product.name) or iterate over nested arrays/objects to display meaningful content.

内容的提问来源于stack exchange，提问作者Kapil Soni