Angular项目NG0900错误：*ngFor无法遍历API返回单个对象

问题核心 #

*ngFor指令仅支持遍历可迭代对象（如数组），但你的API返回的是单个ProductArticle对象，直接赋值给数组类型的products会导致Angular无法遍历，触发NG0900错误。

修复方案 #

在订阅API响应时，将单个对象包装成数组后再赋值，同时修正异步打印的问题（原代码中console.log会先打印初始空数组，因为HTTP请求是异步操作）。

修改后的product-info.component.ts代码 #

import { Component, OnInit } from '@angular/core';
import { ProductArticle } from '../models/product-article';
import { ProductArticleService } from '../services/product-article.service';

@Component({
  selector: 'app-product-info',
  templateUrl: './product-info.component.html',
  styleUrls: ['./product-info.component.css']
})
export class ProductInfoComponent implements OnInit {
  products: ProductArticle[] = [];

  constructor(private productArticleService: ProductArticleService) { }

  ngOnInit(): void { }

  public getProductInfo() {
    this.productArticleService
      .getProduct()
      // 修正响应类型为单个对象，包装成数组后赋值
      .subscribe((result: ProductArticle) => {
        this.products = [result];
        console.log(this.products); // 移到回调内，确保打印最新数据
      });
  }
}

可选：兼容API返回数组/单个对象的健壮写法 #

如果后续API可能返回数组或单个对象，可添加类型判断：

.subscribe((result: ProductArticle | ProductArticle[]) => {
  this.products = Array.isArray(result) ? result : [result];
  console.log(this.products);
});

说明 #

• HTML代码无需修改，因为products现在是合法数组，*ngFor可正常遍历
• 原代码中console.log放在订阅外部会打印初始空数组，必须移到回调内部才能获取异步请求后的真实数据

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