Angular调用API成功但读取属性值显示undefined求助

核心问题 #

1. 字段名大小写不匹配：API返回的字段是小驼峰/小写开头（如idAchat_PK、fournisseur），但你的Achat类定义的属性是大驼峰开头（如IDAchat_PK、Fournisseur）。TypeScript的类型断言仅做编译时检查，实际返回的JSON对象属性名和类属性名不一致，导致读取Fournisseur时找不到对应属性，返回undefined。
2. 服务返回类型错误：DbService的GetAchats方法声明返回Observable<Achat>，但API实际返回的是数组，类型应该是Observable<Achat[]>。
3. 类型不匹配（可选）：API返回的fraisLivraison是数字类型，但类里定义为string，可能导致后续类型问题。

解决方案 #

方案一：统一字段名（最简单直接） #

修改Achat类的属性名，和API返回的字段完全一致：

export class Achat {
    constructor(
      public idAchat_PK: number,
      public date: Date,
      public fournisseur: string,
      public fraisLivraison: number, // 修正为数字类型，匹配API返回
      public status: number
    ) {}
}

同时修正DbService的返回类型：

export class DbService {
  public Back_End_Url = "https://localhost:7198/pokegong/";

  constructor(private httpClient: HttpClient) { }

  public GetAchats(): Observable<Achat[]> { // 改为数组类型
    return this.httpClient.get<Achat[]>(this.Back_End_Url + "Achat");
  }
}

组件中读取属性时使用匹配的字段名：

console.log(this.achats[3].fournisseur) // 改为小写开头的fournisseur

方案二：保留类属性名，手动映射字段 #

如果不想修改类的属性名，在订阅数据时手动将API返回的字段映射到类属性：

首先修正服务返回类型（同方案一），然后修改组件的GetAchats方法：

GetAchats() {
  return this.dbService.GetAchats().subscribe((data: any[]) => {
    this.achats = data.map(item => new Achat(
      item.idAchat_PK,
      new Date(item.date),
      item.fournisseur,
      item.fraisLivraison.toString(), // 若类里需要string类型，转成字符串
      item.status
    ));
    console.log(this.achats[3])
    console.log(this.achats[3].Fournisseur) // 此时可以正常读取类的属性
  });
}

验证 #

修改后重新运行项目，控制台输出对应属性将正确显示VISTAPRINT。

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