Angular向ASP.NET Core API提交下拉列表数据时出现空值错误

我在尝试从Angular端提交包含下拉列表的表单数据到ASP.NET Core API时遇到问题：不含下拉列表时表单可正常提交，但提交下拉列表信息时会出现空值错误，Angular端显示内部服务器错误。

API端代码 #

#region httpPost
[HttpPost]
public async Task<IActionResult> AddReport([FromBody] Report reportRequest)
{
    var ReportNo = _context.Reports.Select(c => c.ReportNo).Count();
    var nextReportNo = ReportNo += 1;
    var date = DateTime.Now;

    reportRequest.ID = Guid.NewGuid();
    reportRequest.DateCreated = date;
    reportRequest.ReportNo = nextReportNo;

    await _context.Reports.AddAsync(reportRequest);
    await _context.SaveChangesAsync();

    return Ok(reportRequest);
}

Angular端Report模型 #

export interface Report {
    id: string;
    reportNo: number;
    dateCreated: Date;
    dateEvent: Date; //事件日期
    title: string;
    issuedBy: string;
    description: string;
    isActive: boolean; // 标记报告是否有效
    closedOnDate: Date;
    editOnDate: Date;
    reportByEmployeeOrVisitor: string;
    actionNeeded: boolean;
    closeReport: boolean;
    Building: string;
    buildingName: string;
    KindOfReport: string;
    KindOfReportName: string;
}

Angular端添加信息的组件代码 #

export class AddReportComponent implements OnInit {
  currentDate = new Date();
  SelectedKindOfReport:string = '';
  SelectedBuilding:string= '';
  kindOfReports: KindOfReport[]=[
  ];

  buildings: Building[]=[
  ];

  addReportRequest: Report = {
 id: ' ',
  KindOfReport: this.SelectedKindOfReport,
  buildingName: '',
  KindOfReportName: '',
   reportNo: 0,
  closedOnDate: new Date(),
  Building: this.SelectedBuilding,
    issuedBy: ' ',
    dateCreated: this.currentDate,
    dateEvent:  this.currentDate,
    editOnDate: new Date(),
    title: ' ',
    description: ' ',
    isActive: true,
    closeReport: false,
    actionNeeded: false,
    reportByEmployeeOrVisitor: '',
  };
  constructor(private ReportService: ReportsService, private datePipe : DatePipe, private router: Router) {}
  ngOnInit(): void {
    const cValue = formatDate(this.currentDate, 'yyyy-MM-dd', 'en-US');
    this.SelectedKindOfReport = "3fa85f64-5717-4562-b3fc-2c963f66afa6";
    this.SelectedBuilding= "2feecbc8-ed43-4c49-829f-c49dd707f75c";
}

排查与解决思路 #

1. 绑定时机问题 #

你初始化addReportRequest时直接把SelectedKindOfReport和SelectedBuilding（当时是空字符串）赋值给了请求对象的对应字段，但后续在ngOnInit里给这两个变量赋值时，请求对象里的字段不会自动更新——因为这是简单类型赋值，不是双向绑定。

解决办法：

• 要么在ngOnInit赋值后手动更新请求对象：

  ngOnInit(): void {
    const cValue = formatDate(this.currentDate, 'yyyy-MM-dd', 'en-US');
    this.SelectedKindOfReport = "3fa85f64-5717-4562-b3fc-2c963f66afa6";
    this.SelectedBuilding= "2feecbc8-ed43-4c49-829f-c49dd707f75c";
    // 手动同步到请求对象
    this.addReportRequest.KindOfReport = this.SelectedKindOfReport;
    this.addReportRequest.Building = this.SelectedBuilding;
  }
  

• 要么直接在模板里用双向绑定，把下拉框和addReportRequest的字段绑定：

  <select [(ngModel)]="addReportRequest.KindOfReport">
    <!-- 下拉选项 -->
  </select>
  

2. 大小写匹配问题 #

检查ASP.NET Core端的Report实体类字段大小写：Angular里的Building、KindOfReport是首字母大写，若C#端实体类字段命名不一致，或序列化配置未忽略大小写，会导致字段无法映射。

解决办法：
在ASP.NET Core的Program.cs里配置JSON序列化忽略大小写：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
    });

3. 模型验证问题 #

检查API端的Report实体类是否有[Required]注解的必填字段，如果Building或KindOfReport被标记为必填但提交时为空，会触发模型验证失败，返回服务器错误。

解决办法：
在API接口里先做模型验证，返回明确的错误信息：

[HttpPost]
public async Task<IActionResult> AddReport([FromBody] Report reportRequest)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState); // 返回验证错误，方便Angular排查
    }
    // 原有业务代码...
}

4. 提交时同步字段 #

如果是用户手动选择下拉框后提交，要确保提交时请求对象的对应字段已被正确赋值，可在提交方法里同步：

onSubmit() {
  this.addReportRequest.KindOfReport = this.SelectedKindOfReport;
  this.addReportRequest.Building = this.SelectedBuilding;
  // 调用服务提交数据
  this.ReportService.addReport(this.addReportRequest).subscribe(...);
}

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