Angular新手求助：使用*ngFor渲染JSON数据报错

Hey there! That error is super common when working with Angular's *ngFor—it's telling you that you're trying to loop over an object instead of an iterable like an array. Let's break down how to fix this step by step.

Step 1: Confirm Your API's Response Structure #

First, you need to check what your API is actually sending back. Open your browser's DevTools (F12), go to the Network tab, and look at the response from your product API. You'll see one of these scenarios:

Scenario A: Single Product Object (Not a List) #

If your response looks like this (a single object), you don't need *ngFor at all—you're trying to loop over a single item:

{
  "id": 1,
  "name": "Wireless Headphones",
  "price": 149.99,
  "description": "Noise-cancelling over-ear headphones"
}

Scenario B: Array of Products (List) #

If it's a list, it should be wrapped in square brackets like this:

[
  { "id": 1, "name": "Wireless Headphones", "price": 149.99 },
  { "id": 2, "name": "Bluetooth Speaker", "price": 79.99 }
]

Scenario C: Object with Nested Array #

Many APIs wrap arrays in a parent object (for status messages, pagination, etc.):

{
  "status": "success",
  "data": [
    { "id": 1, "name": "Wireless Headphones" },
    { "id": 2, "name": "Bluetooth Speaker" }
  ]
}

Step 2: Fix Based on Your Scenario #

For Scenario A (Single Object): Remove *ngFor #

Instead of looping, bind directly to the object's properties in your template.

In your api.component.ts:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-api',
  templateUrl: './api.component.html'
})
export class ApiComponent implements OnInit {
  product: any; // Store single product object

  constructor(private apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getProductDetail().subscribe(response => {
      this.product = response;
    });
  }
}

In your template (api.component.html):

<div *ngIf="product">
  <h2>{{ product.name }}</h2>
  <p>Price: ${{ product.price }}</p>
  <p>{{ product.description }}</p>
</div>

(Use *ngIf to avoid errors while the data loads)

For Scenario B or C (Array Data): Extract the Array #

If your API returns an array directly (Scenario B), assign it directly to your component's array variable. If it's nested (Scenario C), extract the array from the parent object.

Example for Scenario C (Nested Array):

In api.component.ts:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-api',
  templateUrl: './api.component.html'
})
export class ApiComponent implements OnInit {
  products: any[] = []; // Initialize empty array to avoid undefined issues

  constructor(private apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getProducts().subscribe(response => {
      // Extract the array from the "data" property (adjust to match your API's field name)
      this.products = response.data;
    });
  }
}

In your template:

<div *ngFor="let product of products">
  <h3>{{ product.name }}</h3>
  <p>Price: ${{ product.price }}</p>
</div>

Bonus: If You Need to Loop Over an Object's Properties #

If you want to display every key-value pair of a single product object (e.g., show all fields dynamically), convert the object to an array first:

In api.component.ts:

product: any;
productProperties: { key: string; value: any }[] = [];

ngOnInit(): void {
  this.apiService.getProductDetail().subscribe(response => {
    this.product = response;
    // Convert object to array of key-value pairs
    this.productProperties = Object.entries(this.product).map(([key, value]) => ({ key, value }));
  });
}

In your template:

<div *ngFor="let prop of productProperties">
  <span>{{ prop.key }}:</span>
  <span>{{ prop.value }}</span>
</div>

Pro Tip: Use Async Pipe (Avoid Subscription Management) #

Instead of manually subscribing, use Angular's async pipe to handle subscriptions automatically. This keeps your component cleaner:

In api.component.ts:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

products$: Observable<any[]>;

ngOnInit(): void {
  this.products$ = this.apiService.getProducts().pipe(
    map(response => response.data) // Extract array here
  );
}

In your template:

<div *ngFor="let product of (products$ | async)">
  <h3>{{ product.name }}</h3>
  <p>Price: ${{ product.price }}</p>
</div>

内容的提问来源于stack exchange，提问作者Nishan Dhungana