Binding data from database to a dropdownlist in Angular 17 and .NetCore 8 not working

I am trying to bind data fetched from database to a dropdownlist upon loading a certain component/page in a nG17 app. The backend API is written in .NetCore 8. I have done the relevant pieces of code in the backend and the frontend. I had hoped that it would work just fine but no. I am getting an empty dropdown. Nothing is being populated. Let me share the related pieces of code so that you can see what I did.

Category.cs

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

WebAPI endpoint

[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');
  }

category.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);
          }
        })
    
  }

The response I am getting in console is like Array(15) which when expanded shows that the data is there.

[
    {
        "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>

I double checked to see if the API endpoint is being hit and if data is really being fetched. No problem there. I consoled the response. I am getting the data from the database in the form of an array. The data is there.

So what's wrong? Where am I committing the mistake? The binding in the html element, or the data format? Why am I getting a blank dropdown? Can you folks spot the problem in code or logic? Please suggest what to rectify.

***** I forgot to mention one thing. My dropdown is inside a reactive form. So the code where I used formBuilder to initialize my form was originally like

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

You can see category is initialized like

category:['', Validators.required]

Could that have anything to do?

In the data you posted you misspelled the "CategoryName" attribute in your Category class:

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

You can see in the response you wrote to console that your angular object has the same misspelling:

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

But your binding in the html has the correct spelling:

{{jobcategory.categoryName}}