Angular 11应用中*ngFor渲染报错排查：接口返回对象而非数组导致无法获取数据

问题根源 #

你遇到的核心问题是服务的类型声明和后端接口实际返回的响应结构不匹配：

• 你在FoodListService里声明getAllProducts返回Observable<FoodListModelServer[]>，但实际接口返回的是一个包含count和stores数组的对象（{count: 5, stores: Array(5)}）。
• 当你把这个对象直接赋值给foodlist数组后，*ngFor尝试遍历对象而非数组，就会抛出"Only arrays and iterables are allowed"的错误。

分步解决方案 #

1. 修正服务的响应类型声明

首先创建一个匹配实际响应结构的接口，替换原来的数组类型声明：

// 先定义匹配接口返回结构的类型
interface FoodListApiResponse {
  count: number;
  stores: FoodListModelServer[];
}

export class FoodListService { 
  private url = environment.serverURL; 
  constructor(private http: HttpClient) { } 

  // 更新方法的返回类型为新定义的接口
  getAllProducts(storeId: Number): Observable<FoodListApiResponse> { 
    return this.http.get<FoodListApiResponse>(this.url + 'foodlist/' + storeId); 
  } 
}

2. 在组件中提取数组数据

订阅接口时不再直接赋值整个响应对象，而是取出里面的stores数组赋值给foodlist：

export class FoodListComponent implements OnInit { 
  foodlist: FoodListModelServer[] = []; 
  storeId: number; // 确保这个变量已正确初始化

  constructor(
    private foodListService: FoodListService, 
    private router: Router, 
    private route: ActivatedRoute
  ) {} 

  ngOnInit(): void { 
    // 先确保storeId正确获取（比如从路由参数中提取）
    this.route.params.subscribe(params => {
      this.storeId = +params['storeId']; // 转换为数字类型
      
      this.foodListService.getAllProducts(this.storeId).subscribe(response => { 
        this.foodlist = response.stores; // 提取数组赋值给foodlist
        console.log(this.foodlist); // 现在应该是预期的FoodListModelServer数组了
      });
    });
  } 
}

3. 验证HTML渲染

你的现有HTML代码不需要修改，只要foodlist是数组，*ngFor就能正常遍历：

<div class="col-md-8 col-lg-10 col-sm-6 card"> 
  <li *ngFor="let fooditem of foodlist"> 
    {{fooditem.food_name}} 
  </li> 
</div>

为什么另一个组件能正常运行？ #

大概率是因为另一个组件对应的后端接口直接返回纯数组，或者那个组件的服务已经处理了类似的响应结构，所以类型声明和实际响应匹配，不会出现遍历对象的错误。

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