如何从连接数据库的ASP.NET Core WebAPI取数到Angular 11，返回空记录怎么解决

• 前后端字段命名不匹配：ASP.NET Core默认使用System.Text.Json序列化时会自动将C#的帕斯卡命名（大驼峰，如CardHolder）转为小驼峰格式（如cardHolder）返回，而前端TypeScript定义的PaymentDetail类/接口、模板绑定用的都是大驼峰字段名，读取不存在的字段自然返回undefined。
• 接口返回结构嵌套：后端接口没有直接返回PaymentDetail数组，而是在外层包裹了统一响应体（如{code:200, data:[...], message:"success"}），直接将整个响应体转为数组会导致list内容不对，无法正确读取字段。
• 字段拼写错误：模板中ExpirationdDate多写了一个字母d，若实际字段名为ExpirationDate，读取错误拼写的字段会返回undefined。
• 请求异常未捕获：接口请求出现跨域、404、500等错误时，list没有被正确赋值，始终为初始的undefined或空值。
• 变量未初始化：PaymentDetailService中的list没有初始化为空数组，初始值为undefined时渲染也会出现异常。

1. 首先排查接口实际返回：打开浏览器F12开发者工具，切换到「网络」面板，查看对应GET请求的响应内容，确认请求状态是否为200、返回的数据结构、字段名格式。
2. 处理字段命名不匹配问题，二选一即可：
   • 前端修改对齐后端返回：将PaymentDetail的字段定义、模板绑定的字段名全部改为和后端返回一致的小驼峰格式，比如{{pd.cardHolder}}
   • 后端修改序列化配置：在ASP.NET Core的Program.cs中添加配置，关闭默认的小驼峰序列化规则，保留帕斯卡命名返回：

   builder.Services.AddControllers()
       .AddJsonOptions(options =>
       {
           options.JsonSerializerOptions.PropertyNamingPolicy = null;
       });
   

3. 处理嵌套响应结构：如果后端返回了外层包装体，取对应数据层赋值给list，示例：

   refreshList(){
       this.http.get(this.baseURL).toPromise()
           .then(res => this.list = (res as any).data as PaymentDetail[]);
   }
   

4. 修正模板拼写错误：将{{pd.ExpirationdDate}}改为正确的字段名，和定义、返回的字段保持一致。
5. 添加请求错误捕获，方便排查问题：

   refreshList(){
       this.http.get(this.baseURL).toPromise()
           .then(res => this.list = res as PaymentDetail[])
           .catch(err => console.error('请求失败：', err));
   }
   

6. 初始化list变量：在PaymentDetailService中给list设置初始空数组：

   list: PaymentDetail[] = [];
   

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