Angular 5+调用ASP.NET Core Web API时POCO对象映射为空求助

嘿，我看你碰到的这个问题很典型，先帮你梳理下核心原因，再给几个可行的解决办法：

问题复盘 #

你已经完成了Web API部署（Postman/Swagger调用正常），也用NSwag生成了TypeScript客户端，但前端拿到JSON数据后，映射到Product对象时所有属性都为空——关键是init()方法里console.log(data)明明能看到完整数据，用data["ProductId"]却拿不到值，这说明字段名的大小写不匹配是罪魁祸首！

从你提到的控制台截图来看，后端返回的JSON字段应该是驼峰命名（比如productId），但你的Product类里却用帕斯卡命名（首字母大写的ProductId）去取值，自然拿不到数据。

解决方案 #

下面给你三个不同方向的解决办法，你可以根据自己的项目习惯选：

1. 修改前端Product类的字段映射（最快见效）

直接把init()方法里的键名改成和后端返回的驼峰命名一致：

init(data?: any) {
    console.log(data);
    if (data) {
        this.productId = data["productId"]; // 改成小写开头
        this.productNameDe = data["productNameDe"];
        this.productNameFr = data["productNameFr"];
        // 剩下的所有属性都对应改成驼峰命名的键名
        this.modifiedDate = data["modifiedDate"] ? new Date(data["modifiedDate"].toString()) : <any>undefined;
        this.categorie = data["categorie"] ? ProductCategory.fromJS(data["categorie"]) : <any>undefined;
        this.section = data["section"] ? ProductSection.fromJS(data["section"]) : <any>undefined;
    }
}

2. 配置ASP.NET Core Web API返回帕斯卡命名的JSON

如果想保持前端类的帕斯卡命名风格，可以修改后端的JSON序列化配置，让接口返回和前端类属性名一致的字段：

• 如果你用的是ASP.NET Core 2.0（基于Newtonsoft.Json），在Startup.cs的ConfigureServices里添加：

services.AddMvc()
    .AddJsonOptions(options =>
    {
        // 禁用默认的驼峰命名，保持实体类的原属性名（帕斯卡）
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

• 如果你升级到了更高版本的ASP.NET Core（用System.Text.Json），配置如下：

services.AddMvc()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

3. 让NSwag自动处理大小写匹配

下次生成TypeScript客户端时，在NSwagStudio里调整生成选项：

• 找到TypeScript客户端的配置项，开启**"Convert JSON properties to camelCase"**（或者类似的"匹配JSON驼峰命名"选项）
• 这样生成的init()和fromJS()方法会自动用驼峰键名去映射，不用手动修改代码

验证方法 #

修改后可以在init()方法里加一行console.log(data["productId"])，确认能拿到具体值，再查看最终的Product对象属性是否填充正常。

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