Angular 17与.NET Core 8下拉框绑定数据库数据失败求助

核心问题 #

下拉框为空的直接原因是前后端数据字段名不匹配，导致Angular模板无法正确读取显示文本：

• 后端.NET Core返回的JSON字段是catgoryName（拼写缺失字母e）
• 前端category.model.ts定义的接口字段是categoryName，模板渲染时用的也是{{jobcategory.categoryName}}，字段名不匹配导致内容无法显示。

表单初始化的category:['', Validators.required]不影响下拉框选项渲染，它只是响应式表单控件的初始值，选项是通过*ngFor循环jobCategories生成的，这部分逻辑无问题。

修正方案 #

方案1：修正后端字段名（推荐） #

修改Category.cs中的属性名拼写，确保和前端字段一致：

public class Category
{
    public int Id { get; set; }
    // 修正拼写：CatgoryName → CategoryName
    public string CategoryName { get; set; }
}

.NET Core默认JSON序列化会将大驼峰属性转为小驼峰，返回的JSON字段会变为categoryName，与前端接口完全匹配。

方案2：修改前端适配后端字段 #

若无法修改后端，调整前端代码适配返回字段：

1. 更新category.model.ts接口：

export interface Category{
    id:number;
    // 改为和后端一致的字段名
    catgoryName:string;
}

2. 更新模板中的渲染代码：

<div class="mb-3">
    <select formControlName="category" class="form-select" id="categoryDropDown" (change)="changeCategory($event)">
        <option *ngFor="let jobcategory of jobCategories;" [value]="jobcategory.id">
            <!-- 修正字段名 -->
            {{jobcategory.catgoryName}}
        </option>
     </select>
</div>

额外优化建议 #

为保证类型安全，修改base.service.ts的返回类型，避免使用any：

import { Observable } from 'rxjs';
import { Category } from './category.model';

getAllJobCategories(): Observable<Category[]>
{
    return this.http.get<Category[]>(environment.baseEndPoint+'/jobcategories');
}

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