Angular调用ASP.NET Web API报Response.forEach is not a function错误

报错核心原因是你直接对接口返回的根响应对象调用forEach方法。后端返回的HomeModel是包含4个数组属性的普通对象，不是数组类型，原生JavaScript/TypeScript普通对象本身没有forEach实例方法，调用必然抛出异常。

• 对齐TS接口定义和后端返回结构
  首先确认Angular侧声明的接口字段名、类型和后端返回的JSON结构完全匹配，ASP.NET Framework Web API 4.7默认返回大驼峰命名字段，不要错写成小驼峰导致属性值读取为undefined，参考定义：

  // 对应后端MotorcycleImgDTO
  interface MotorcycleImgDTO {
    Id: number;
    // 按你的DTO实际字段补充，这里假设图片字节数组字段名为ImgBytes
    ImgBytes: string;
    BikeName: string;
  }
  
  // 对应后端HomeModel
  interface HomeModel {
    StreetBikes: MotorcycleImgDTO[];
    SportBikes: MotorcycleImgDTO[];
    AdventureBikes: MotorcycleImgDTO[];
    ScooterBikes: MotorcycleImgDTO[];
  }
  

• 修正响应遍历逻辑
  不要直接对根响应对象调用forEach，分别遍历四个分类下的数组完成base64地址组装即可，错误写法和正确写法对比如下：
  错误写法（触发报错的写法）：

  onHomeBikesImgsResponse(res: HomeModel) {
    // 错误：res是普通对象，不是数组，不存在forEach方法
    res.forEach(item => {
      // 组装base64逻辑
    })
  }
  

  正确写法参考：

  // 组件内提前声明四个分类的图片列表属性
  streetBikeList: MotorcycleImgDTO[] = [];
  sportBikeList: MotorcycleImgDTO[] = [];
  adventureBikeList: MotorcycleImgDTO[] = [];
  scooterBikeList: MotorcycleImgDTO[] = [];
  
  onHomeBikesImgsResponse(res: HomeModel) {
    // 遍历街车分类图片，拼接base64展示前缀
    res.StreetBikes?.forEach(img => {
      this.streetBikeList.push({
        ...img,
        showSrc: `data:image/jpeg;base64,${img.ImgBytes}`
      })
    })
  
    // 遍历跑车分类图片
    res.SportBikes?.forEach(img => {
      this.sportBikeList.push({
        ...img,
        showSrc: `data:image/jpeg;base64,${img.ImgBytes}`
      })
    })
  
    // 遍历探险车分类图片
    res.AdventureBikes?.forEach(img => {
      this.adventureBikeList.push({
        ...img,
        showSrc: `data:image/jpeg;base64,${img.ImgBytes}`
      })
    })
  
    // 遍历踏板车分类图片
    res.ScooterBikes?.forEach(img => {
      this.scooterBikeList.push({
        ...img,
        showSrc: `data:image/jpeg;base64,${img.ImgBytes}`
      })
    })
  }
  

  代码中使用可选链?.是为了兼容某一分类无数据返回null的边界场景，避免触发Cannot read properties of undefined (reading 'forEach')的二次错误。
• 校验HttpClient接口调用配置
  检查HomeCategorisedBikesService中的接口请求写法，不要手动修改responseType为text或blob，保持默认的JSON响应解析配置，否则拿到的响应不是解析完成的JSON对象，也会触发同类错误，参考正确写法：

  // home-categorised-bikes.service.ts
  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  import { HomeModel } from './models/home.model';
  
  @Injectable({ providedIn: 'root' })
  export class HomeCategorisedBikesService {
    constructor(private http: HttpClient) {}
  
    getHomeBikeImgs(): Observable<HomeModel> {
      // 保持默认responseType: 'json'即可，不要额外修改响应类型
      return this.http.get<HomeModel>('/api/Home');
    }
  }
  

在onHomeBikesImgsResponse方法第一行添加调试代码console.log('接口响应：', res, '是否为数组：', Array.isArray(res))，打开浏览器控制台如果看到Array.isArray(res)输出为false，即可确认是上述响应类型不匹配的问题。

额外注意：Angular 13前端和ASP.NET Web API 4.7后端联调时，需要在后端Web.config中正确配置CORS规则，允许前端本地开发域名的跨域请求，否则会出现接口请求失败拿不到响应的问题。

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