Angular 14无法获取.NET Core 6 CreateAtAction返回的响应值

1. 后端JSON序列化配置问题 #

.NET Core 默认的 System.Text.Json 序列化器会自动将PascalCase格式的属性名转为驼峰式（比如Id变成id），如果你的ProjectAPIDto属性是 PascalCase（如Id、Title），但前端ProjectDto期望的是同格式的属性名，就会出现字段不匹配的情况。

• 检查Program.cs中的序列化配置，是否未显式保留属性名大小写：

  builder.Services.AddControllers()
      .AddJsonOptions(options =>
      {
          options.JsonSerializerOptions.PropertyNamingPolicy = null; // 关闭自动转驼峰
      });
  

• 若使用Newtonsoft.Json，需确认是否配置了驼峰序列化规则，如有则调整为保留原属性名格式。

2. DTO映射未正确执行 #

确认后端确实完成了Project实体到ProjectAPIDto的映射：

• 若使用AutoMapper，检查映射配置是否完整，未遗漏属性：

  CreateMap<Project, ProjectAPIDto>();
  

• 若为手动映射，确保每个属性都完成赋值，避免直接返回原始Project实体（如果返回实体，字段会对应数据库列名的小写格式）。

3. CreateAtAction返回对象错误 #

检查CreateAtAction的参数是否传入了正确的ProjectAPIDto实例，而非原始Project实体：

// 正确：映射后传入DTO
var projectDto = _mapper.Map<ProjectAPIDto>(newProject);
return CreatedAtAction(nameof(GetProject), new { id = projectDto.Id }, projectDto);

// 错误：直接返回实体
return CreatedAtAction(nameof(GetProject), new { id = newProject.Id }, newProject);

4. 前端接收解析问题 #

即使后端返回正确的DTO字段，前端若未正确解析也会出现字段不匹配：

• 确认前端ProjectDto的属性名与后端ProjectAPIDto完全一致；
• 若后端返回驼峰格式字段，前端可手动转换为PascalCase：

  import { HttpClient } from '@angular/common/http';
  
  httpClient.post<ProjectDto>(url, data).pipe(
    map(res => {
      return Object.keys(res).reduce((acc, key) => {
        const newKey = key.charAt(0).toUpperCase() + key.slice(1);
        acc[newKey] = res[key];
        return acc;
      }, {} as ProjectDto);
    })
  );
  

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