I am building my first Angular and .NET application. I am currently facing the following problem: When I am trying to "View" the Employee information, the information doesn't show up.

This is my home page:

When I click on View, this is what it shows up:

This is my code:

employee service

getEmployee(id: string): Observable<Employee> {
    return this.http.get<Employee>(this.baseApiUrl   '/api/employees'   id)
  }

edit-employee-component.ts

import { EmployeesService } from './../../../services/employees.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Employee } from 'src/app/models/employee.model';

@Component({
  selector: 'app-edit-employee',
  templateUrl: './edit-employee.component.html',
  styleUrls: ['./edit-employee.component.css']
})
export class EditEmployeeComponent implements OnInit {

  employeeDetails: Employee = {
    id: '',
    name: "",
    email: "",
    phone: 0,
    salary: 0,
    department: ""
    
  }

  constructor(private route: ActivatedRoute, private employeeService: EmployeesService) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe({
      next: (params) => {
        const id = params.get('id');

        if(id) {
          //call api
          this.employeeService.getEmployee(id)
          .subscribe({
            next: (response) => {
              this.employeeDetails = response;
            }
          });
        }
      }
    })
  }

}

edit-employee-component.html

<div >
    <h1 >Edit Employee</h1>


    <div >
        <div >
            <form #form="ngForm">
                <div >
                    <label for="id" >If</label>
                    <input type="text"  id="if" readonly
                    name = "if" [(ngModel)]="employeeDetails.id">
                  </div>
                <div >
                  <label for="name" >Name</label>
                  <input type="text"  id="name" 
                  name = "name" [(ngModel)]="employeeDetails.name">
                </div>
                <div >
                    <label for="email" >Email</label>
                    <input type="email"  id="email"
                    name = "email" [(ngModel)]="employeeDetails.email">
                  </div>
                  <div >
                    <label for="phone" >Phone</label>
                    <input type="number"  id="phone"
                    name ="phone" [(ngModel)]="employeeDetails.phone">
                  </div>
                  <div >
                    <label for="salary" >Salary</label>
                    <input type="number"  id="salary"
                    name ="salary" [(ngModel)]="employeeDetails.salary">
                  </div>
                  <div >
                    <label for="department" >Department</label>
                    <input type="text"  id="department"
                    name = "department" [(ngModel)]="employeeDetails.department">
                  </div>
                <button type="submit" >Save</button>
              </form>
        </div>
    </div>
    
</div>

And finally, this is the Controller method:

[HttpGet]
[Route("{id:Guid}")]
public async Task<IActionResult> GetEmployee([FromRoute] Guid id)
{
    var employee = 
        await _fullStackDbContext.Employees.FirstOrDefaultAsync(x => x.Id == id);
    if (employee == null)
    {
        return NotFound();
    }
    return Ok(employee);
}

I would be very glad if someone helps me. Thanks very much in advance!

CodePudding user response：

My guess is that your Api is returning 404 because the construction is incorrect.

return this.http.get<Employee>(this.baseApiUrl   '**/api/employees**'   id)

Add a slash after 'employees' like below:

return this.http.get<Employee>(this.baseApiUrl   '/api/employees/'   id)

This is also evident in the screenshots you posted.