Angular 9应用无法遍历Java后端返回的dataList数据如何解决

你的Java后端返回的JSON结构是外层包裹了dataList字段的对象，并非直接返回HouseGuidelineResponse数组，但你当前的HTTP请求直接将整个响应断言为数组类型，导致houseData实际存储的是外层对象，而非你需要的数组，因此出现不可迭代、下标访问返回undefined的错误。

1. 调整服务层请求逻辑 #

首先导入rxjs的map操作符，修改请求的泛型定义，取出响应中的dataList字段作为返回值：

import { map } from 'rxjs/operators';

export class HouseGuidelinesService {
   // 修复原URL漏写的冒号问题
   private readonly houseGuidelinesURL = 'http://localhost:8200/homeguidelines';

   constructor(private http: HttpClient) {}

   getHouseData(houseCode: string): Observable<HouseGuidelineResponse[]> {
     // 泛型指定外层响应结构，通过map提取数组数据
     return this.http.get<{dataList: HouseGuidelineResponse[]}>(this.houseGuidelinesURL + '/', {headers: {houseCodeList: houseCode}})
       .pipe(
         map(response => response.dataList)
       );
   }
}

2. 优化组件层代码 #

修复代码笔误，初始化数组避免未赋值时访问报错：

// 修复接口名拼写错误：OnInIt → OnInit
export class HouseComponent implements OnInit {
  // 初始化空数组
  houseData: HouseGuidelineResponse[] = [];
  houseList = [];

  // 修复constructor参数前多写的冒号
  constructor(private activatedRoute: ActivatedRoute, private router: Router, private houseSummaryService: HouseService, private houseGuidelinesService: HouseGuidelinesService ) {}

  callHouseService(houseCodeList) {
    this.houseGuidelinesService.getHouseData(houseCodeList).subscribe(
      (data) => {
        this.houseData = data;
        // 遍历数组赋值到自定义数组
        for (const item of this.houseData) {
          this.houseList.push(item);
          // 可正常访问属性
          console.log(item.description);
        }
        console.log('first house data: ', this.houseData[0]);
      },
      (error) => {
        // 打印错误详情方便排查
        console.log('Error Getting House Policy Info!', error);
      }
    );
  }
}

• 确保HouseSettings类型定义和后端返回的settings字段结构完全匹配，避免后续访问settings属性时出现类型错误
• 若模板中需要直接渲染houseData，建议结合*ngIf判断数组长度后再渲染，避免空数组阶段出现渲染错误

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