如何在Angular卡片/面板中显示ASP.NET Core API返回的统计值

问题说明 #

在ASP.NET Core项目中，需将HomeController查询OrderDetail表得到的总数量通过API返回，在Angular卡片中展示。目前表格加载正常，但卡片无法正确显示数值，核心需求是调整HomeController的返回逻辑，确保统计值能被Angular正确解析展示。

OrderDetail表结构及数据

当前效果：

预期效果：

问题根源 #

当前后端返回的是DataTable转成的JSON数组（格式类似[{"TotalQuantity":132}]），前端直接将整个响应对象赋值给totalQuantity，导致卡片显示的是对象/数组而非纯数值。

后端（HomeController.cs）调整方案 #

方案1：直接返回统计数值（推荐，更高效） #

无需使用DataTable，用ExecuteScalar直接获取聚合查询结果：

[HttpGet]
public IActionResult Get()
{
    string query = "Select Sum(OrderDetail.Quantity) as TotalQuantity from OrderDetail";
    string sqlDataSource = _configuration.GetConnectionString("DefaultConnection");
    
    using (SqlConnection con = new SqlConnection(sqlDataSource))
    {
        con.Open();
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            // 获取单个查询结果
            object result = cmd.ExecuteScalar();
            // 处理表为空时Sum返回null的情况，转为0
            int totalQuantity = result != DBNull.Value ? Convert.ToInt32(result) : 0;
            return Ok(totalQuantity);
        }
    }
}

方案2：返回结构化对象（适用于后续扩展多统计字段） #

先定义统计类，再返回匿名/强类型对象：

// 定义统计结果类
public class OrderStats
{
    public int TotalQuantity { get; set; }
}

[HttpGet]
public IActionResult Get()
{
    string query = "Select Sum(OrderDetail.Quantity) as TotalQuantity from OrderDetail";
    string sqlDataSource = _configuration.GetConnectionString("DefaultConnection");
    
    using (SqlConnection con = new SqlConnection(sqlDataSource))
    {
        con.Open();
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            object result = cmd.ExecuteScalar();
            int total = result != DBNull.Value ? Convert.ToInt32(result) : 0;
            return Ok(new OrderStats { TotalQuantity = total });
        }
    }
}

前端对应调整 #

对应方案1（返回单个数值） #

修改component.ts的getData方法：

getData(): void {
  this.service.get().subscribe(data => {
    this.totalQuantity = data; // 直接赋值数值
  });
}

对应方案2（返回结构化对象） #

修改component.ts的getData方法：

getData(): void {
  this.service.get().subscribe(data => {
    this.totalQuantity = data.TotalQuantity; // 提取对象中的统计属性
  });
}

HTML绑定保持现有逻辑即可：

<ng-template #content>
  <div class="card">          
    <div class="card-content text">Total Quantity</div>
    <div class="card-content number">{{ totalQuantity }}</div>
  </div>
</ng-template>

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