Angular与.NET Core组件中无法通过API获取StudentId问题

看起来问题出在JSON序列化的命名格式不匹配上，我来帮你拆解一下：

核心原因 #

ASP.NET Core 默认使用的 System.Text.Json 序列化器，会把后端模型的 PascalCase（大驼峰，比如StudentId、Name）属性自动转换为 camelCase（小驼峰，比如studentId、name）返回给前端。

而你的前端代码里：

• 定义的 Student 类用的是 PascalCase：StudentId: number;
• 模板里却用了小写的 st.name（刚好匹配序列化后的name字段，所以能正常显示），但st.StudentId和后端返回的studentId不匹配，导致读取不到值，显示undefined。

几种解决办法 #

办法一：修改前端代码适配后端的命名规则

把前端的Student类属性改成和后端序列化后的 camelCase 一致，同时修正日期类型的错误：

export class Student {
    studentId: number;
    name: string;
    bDate: Date; // 这里DateTimeFormat是错误的，应该用JavaScript的Date类型
}

然后把模板里的st.StudentId改成st.studentId：

<tr *ngFor="let st of students">
    <td>{{ st.studentId }}</td>
    <td>{{ st.name }}</td>
    <td>{{ st.bDate }}</td>
    <td>
        <a [routerLink]="['/students/', st.studentId]">View</a>
    </td>
</tr>

办法二：修改后端序列化规则，保持原属性名

如果你想让后端直接返回 PascalCase 的字段名，可以在项目的配置里修改 JSON 序列化选项：

• 如果你用的是 .NET 6+（Program.cs）：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        // 禁用自动驼峰命名，保持模型的原属性名
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

• 如果你用的是 .NET 5 及以前（Startup.cs）：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.PropertyNamingPolicy = null;
        });
}

这样后端返回的 JSON 字段就是StudentId、Name，和你前端的Student类定义完全匹配，模板里的代码不需要改动就能正常显示。

办法三：单独指定字段的序列化名称

如果不想全局修改序列化规则，可以给后端的Student模型属性加上JsonPropertyName特性，指定返回的字段名：

using System.Text.Json.Serialization;

public class Student
{
    [JsonPropertyName("StudentId")]
    public int StudentId{get;set;}
    [JsonPropertyName("Name")]
    public string Name { get; set; }
    [JsonPropertyName("bDate")]
    public DateTime bDate {get;set;}
}

这种方式可以灵活控制每个字段的返回名称，同样能解决属性不匹配的问题。

另外补充一点：你前端Student类里的bDate:DateTimeFormat是错误的，JavaScript 里没有DateTimeFormat这个类型，应该改成Date才能正确解析后端返回的日期数据。

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