嘗試編輯時顯示現有員工的實際資訊時遇到問題

我正在構建我的第一個 Angular 和 .NET 應用程式。我目前面臨以下問題：當我嘗試“查看”員工資訊時，資訊不顯示。

這是我的代碼：

員工服務

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

編輯員工組件.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;
            }
          });
        }
      }
    })
  }

}

編輯-員工-component.html

<div class="container my-5">
    <h1 class="mb-3">Edit Employee</h1>


    <div class="row">
        <div class="col-6">
            <form #form="ngForm">
                <div class="mb-3">
                    <label for="id" class="form-label">If</label>
                    <input type="text" class="form-control" id="if" readonly
                    name = "if" [(ngModel)]="employeeDetails.id">
                  </div>
                <div class="mb-3">
                  <label for="name" class="form-label">Name</label>
                  <input type="text" class="form-control" id="name" 
                  name = "name" [(ngModel)]="employeeDetails.name">
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="email"
                    name = "email" [(ngModel)]="employeeDetails.email">
                  </div>
                  <div class="mb-3">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="number" class="form-control" id="phone"
                    name ="phone" [(ngModel)]="employeeDetails.phone">
                  </div>
                  <div class="mb-3">
                    <label for="salary" class="form-label">Salary</label>
                    <input type="number" class="form-control" id="salary"
                    name ="salary" [(ngModel)]="employeeDetails.salary">
                  </div>
                  <div class="mb-3">
                    <label for="department" class="form-label">Department</label>
                    <input type="text" class="form-control" id="department"
                    name = "department" [(ngModel)]="employeeDetails.department">
                  </div>
                <button type="submit" class="btn btn-primary">Save</button>
              </form>
        </div>
    </div>
    
</div>

最后，這是 Controller 方法：

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

如果有人幫助我，我會很高興。首先十分感謝！

uj5u.com熱心網友回復：

我的猜測是您的 Api 正在回傳404，因為構造不正確。

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

在“員工”之后添加一個斜杠，如下所示：

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

這在您發布的螢屏截圖中也很明顯。

標籤：。网

上一篇：Razor類別庫-它可以包含類嗎

下一篇：如果之前在C#中使用is-Operator檢查過CS8602警告，如何將其靜音