将数据库中的数据绑定到 Angular 17 和 .NetCore 8 中的下拉列表不起作用

Question

我试图在 nG17 应用程序中加载某个组件/页面时将从数据库获取的数据绑定到下拉列表。后端API是用.NetCore 8编写的。我已经在后端和前端完成了相关代码片段。我本来希望它能正常工作，但没有。我得到一个空的下拉菜单。没有任何内容被填充。让我分享相关的代码片段，以便您可以看到我做了什么。

类别.cs

public class Category
{
    public int Id { get; set; }
    public string CatgoryName { get; set; }
}

WebAPI 端点

[HttpGet]
[Route("jobcategories")]
[AllowAnonymous]
public async Task<ActionResult> GetAllJobCategories()
{
    var jobcategories = await _dbContext.Categories.ToListAsync();
    if(jobcategories.Count>0)
    {
        return Ok(jobcategories);
    }
    else
    {
        return NotFound(new
        {
            Message = "No job categories found!"
        }); 
    }
    
}

base.service.ts

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

类别.model.ts

export interface Category{
    id:number;
    categoryName:string;
}

post-job.component.ts

jobCategories:Category[]=[];

ngOnInit(): void {
    this.baseService.getAllJobCategories()
        .subscribe({
          next:(res:any)=>
          {
            if(res!=null)
            {
              this.jobCategories=res;
              console.log(this.jobCategories);
            }
            else
            {
              console.log('problem fetching job categories');
            }
          },
          error:err=>
          {
            console.log('Server Error:/n', err.error.message);
          }
        })
    
  }

我在控制台中得到的响应类似于 Array(15)，展开时显示数据在那里。

[
    {
        "id": 1,
        "catgoryName": "Web Developer"
    },
    {
        "id": 2,
        "catgoryName": "Fullstack Developer"
    },
    {
        "id": 3,
        "catgoryName": "Frontend Developer"
    },
    {
        "id": 4,
        "catgoryName": "DSA Professional"
    },
    {
        "id": 5,
        "catgoryName": "AI and ML Professional"
    },
    {
        "id": 6,
        "catgoryName": "Technical Content Writer Professional"
    },
    {
        "id": 7,
        "catgoryName": "DBA Professional"
    },
    {
        "id": 8,
        "catgoryName": "Mobile Application Developer"
    },
    {
        "id": 9,
        "catgoryName": "Systems Networking Professional"
    },
    {
        "id": 10,
        "catgoryName": "HR Professional"
    },
    {
        "id": 11,
        "catgoryName": "Backend Developer"
    },
    {
        "id": 12,
        "catgoryName": "Project Manager"
    },
    {
        "id": 13,
        "catgoryName": "Delivery Manager"
    },
    {
        "id": 14,
        "catgoryName": "Process Manager"
    },
    {
        "id": 15,
        "catgoryName": "Module Leader"
    }
]

post-job.component.html

<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.categoryName}}
                </option>
             </select>
        </div>

我仔细检查了 API 端点是否被命中以及数据是否确实被获取。那里没问题。我安慰回应。我正在以数组的形式从数据库获取数据。数据就在那里。

那怎么了？我哪里犯了错误？ html 元素中的绑定，还是数据格式？为什么我会看到一个空白的下拉菜单？你们能发现代码或逻辑中的问题吗？请建议纠正什么。

*****我忘了提一件事。我的下拉菜单位于反应形式内。所以我使用 formBuilder 初始化表单的代码最初是这样的

newJobForm=this.formBuilder.group({
    title:['', Validators.required],
    description:['', [Validators.required, Validators.minLength]],
    category:['', Validators.required],
    applyUrl:['', Validators.required],
  })

您可以看到类别已初始化，如下

category:['', Validators.required]

这有什么关系吗？

Answer 1

在您发布的数据中，您拼错了类别类中的“CategoryName”属性：

public class Category
{
    public int Id { get; set; }
    public string CatgoryName { get; set; }
}

您可以在写给控制台的响应中看到您的角度对象具有相同的拼写错误：

{
    "id": 15,
    "catgoryName": "Module Leader"
}

但是您在 html 中的绑定具有正确的拼写：

{{jobcategory.categoryName}}