Angular中无法遍历API返回的data数组问题求助

问题根源 #

你的API返回的是一个包装对象（包含isSuccess、message、data数组），但当前代码直接把整个响应当成crudOp[]类型赋值，导致无法正确获取内部的data数组进行遍历。

修复步骤 #

1. 新增API响应接口

在crudOp.model.ts中添加描述API整体响应的接口：

export interface crudOp {
    Id:string;
    CreatedDate:string;
    UpdatedDate:string;
    FirstName:string;
    LastName:string;
    Age:number;
    Contact:number;
    Salary:number;
    Message:string;
}

// 新增：匹配API返回的完整结构
export interface ApiResponse {
    isSuccess: boolean;
    message: string;
    data: crudOp[];
}

2. 修改服务的返回类型

更新crud-mongo.service.ts中的接口方法，让它返回正确的响应类型：

import { crudOp, ApiResponse } from './crudOp.model';

export class CrudMongoService { 
  baseUrl = "https://localhost:44391/api/CrudOperations";

  constructor(private http: HttpClient) { }
  
  // 调整返回类型为Observable<ApiResponse>
  GetAllRecord(): Observable<ApiResponse>{
    return this.http.get<ApiResponse>(this.baseUrl + '/GetAllRecord');
  }
}

3. 在组件中提取data数组

修改app.component.ts的订阅逻辑，从响应中取出data字段赋值给crudlist：

export class AppComponent implements OnInit{
  title = 'CrudMongo';
  crudlist:crudOp[] =[];

  constructor(private crudMongoService :CrudMongoService){}

  ngOnInit(): void{
    this.GetAllRecord();
  }

  GetAllRecord(){
    this.crudMongoService.GetAllRecord()
    .subscribe(
      response => {
        console.log(response);
        // 提取响应中的data数组
        this.crudlist = response.data;
      });
  }
}

4. 模板中遍历验证

现在可以在app.component.html中正常遍历crudlist：

<ul>
  <li *ngFor="let item of crudlist">
    {{item.FirstName}} {{item.LastName}} - 年龄：{{item.Age}}
  </li>
</ul>

内容的提问来源于stack exchange，提问作者B. Harika