Angular 5中*ngFor遍历对象报错：无法找到支持的差异器

这个问题我碰到过好多次啦，本质就是Angular的*ngFor指令只能绑定到数组、Set这类可迭代(Iterable)的数据结构，但你从后端API拿到的是一个普通的[object Object]对象，不是可迭代的数组，所以直接用*ngFor遍历就会抛出这个错误。

需要修正的内容 #

1. 确认API返回的数据结构
   先打开浏览器开发者工具的Network面板，查看API请求的响应内容——大概率你的API返回是类似这样的结构：

   {
     "code": 200,
     "message": "success",
     "products": [
       {"id":1,"name":"商品1"},
       {"id":2,"name":"商品2"}
     ]
   }
   

   也就是说，真正的商品数组被包裹在一个对象的products属性里，而不是直接返回数组。

2. 前端数据处理逻辑修正
   你之前应该是把整个API返回的对象直接赋值给了*ngFor绑定的变量（比如products），现在需要把对象里的数组提取出来再赋值。

3. 模板层的兜底处理
   为了避免异步加载时出现undefined的问题，建议给绑定的数组变量初始化一个空数组，或者用async管道处理异步数据流。

正确获取并展示products的代码示例 #

1. 服务层（处理API请求，提取数组） #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ProductService {
  constructor(private http: HttpClient) {}

  // 封装API请求，直接返回商品数组
  getProducts(): Observable<any[]> {
    return this.http.get('你的API接口地址').pipe(
      // 提取response里的products数组，兜底空数组防止API返回异常
      map(response => response['products'] || [])
    );
  }
}

2. 组件层（两种实现方式） #

方式一：手动订阅赋值

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-list',
  template: `
    <!-- 直接遍历初始化好的products数组 -->
    <div class="product-item" *ngFor="let product of products">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
    </div>
  `
})
export class ProductListComponent implements OnInit {
  // 初始化空数组，避免异步加载前*ngFor报错
  products: any[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.productService.getProducts().subscribe({
      next: (products) => {
        this.products = products;
      },
      error: (err) => {
        console.error('获取商品数据失败:', err);
      }
    });
  }
}

方式二：使用Async管道（更简洁，自动处理订阅/取消订阅）

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-list',
  template: `
    <!-- 用async管道处理Observable数据流 -->
    <div class="product-item" *ngFor="let product of products$ | async">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
    </div>
  `
})
export class ProductListComponent implements OnInit {
  // 声明Observable类型的变量
  products$: Observable<any[]>;

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.products$ = this.productService.getProducts();
  }
}

额外注意事项 #

• 如果你的API确实应该返回数组，但实际返回了对象，那可能是后端接口的问题，需要和后端开发确认接口规范。
• 尽量给商品数据定义TypeScript接口，这样能获得类型提示，避免隐式类型错误：

  interface Product {
    id: number;
    name: string;
    price: number;
  }
  // 然后把Observable<any[]>改成Observable<Product[]>，products数组改成Product[]
  

内容的提问来源于stack exchange，提问作者Patrick Obafemi