Angular调用.NET Core接口Http Get返回数组但对象属性为undefined

问题原因 #

后端.NET Core API返回的JSON字段为小驼峰格式：id、firstname、lastname、dateOfBirth，但前端Angular代码中定义的Member类型、模板绑定用的都是大驼峰格式的属性名Id、Firstname、Lastname、DateOfBirth，前后端字段名不匹配导致前端读取不到对应值，显示为undefined。

解决方案 #

方案1：前端适配后端字段格式（改动小，推荐） #

1. 调整TS中Member接口的属性名为小驼峰：

interface Member {
  id: number;
  firstname: string;
  lastname: string;
  dateOfBirth: string;
}

2. 修改组件HTML模板中的绑定属性：

<li *ngFor="let member of members" class="app-members">
    <span>Id: {{member.id}}</span>
    <span>Firstname: {{member.firstname}}</span>
    <span>Lastname: {{member.lastname}}</span>
    <span>DateOfBirth: {{member.dateOfBirth}}</span>
</li>

3. 调整服务代码中读取属性的逻辑：
   把this.log("Firstname: " + response[0].Firstname);改为this.log("Firstname: " + response[0].firstname);即可正常打印属性值。

方案2：后端调整序列化规则，返回大驼峰字段 #

如果不想改动前端代码，可以修改.NET Core的全局JSON序列化配置，保留C#类属性的大驼峰命名：

• 若使用默认System.Text.Json序列化（.NET Core 3.0+默认），在Program.cs中添加如下配置：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        // 关闭默认小驼峰转换，保留属性原命名
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

• 若使用Newtonsoft.Json序列化，添加如下配置：

builder.Services.AddControllers()
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

修改后后端返回的JSON字段就会和C#类的属性名保持一致，匹配前端现有大驼峰命名的代码逻辑。

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