Как загрузить Id с сервера в форму, используя угловой шаблон

Question

Я новичок в angular, поэтому, пожалуйста, прости меня, если этот вопрос звучит несколько странно, но у меня возникли проблемы с пониманием того, как реализовать редактирование в этом проекте.

После того, как я нажму на ссылку Изменить, я ожидаю, что Id будет отправлен на EditEmployeeComponent.ts

и вот мой маршрут

{ path: 'edit/:id', component: EditEmployeeComponent },

в app.module.ts и вот тег привязки:

<a class="btn" [routerLink]="['/edit/',emp.employeeId]" >Edit</a>

EditEmployeeComponent.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../../Services/employeeservice.service';
import { MyEmployees } from '../../Services/Employee';
import { Employee } from '../Employee/Employee';
import { ActivatedRoute } from '@angular/router';
import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from 
'@angular/forms';

@Component({
 selector: 'my-component',
 templateUrl: 'edit-employee.component.html'
})

export class EditEmployeeComponent implements OnInit {
 errorMessage: string = '';
 public emps: Employees;
 employeeId: number;
 employeeForm: FormGroup;
 model = new Employee('', '');



 constructor(private _employeeService: EmployeeService, private _avRoute: 
  ActivatedRoute, private _fb: FormBuilder) {
   if (this._avRoute.snapshot.params['employeeId']) {
     this.employeeId = this._avRoute.snapshot.params["employeeId"];

  }
}

 ngOnInit(){
    if (this.employeeId > 0) {
      console.log(this.employeeId);
      this._employeeService.edit(this.employeeId)
        .subscribe(() => {
          this.emps = this._employeeService.employee
        } 
      , error => this.errorMessage = 'undefine property');
    }
}

здесь также мой _employeeService класс

public edit(id) {
let token = localStorage.getItem("jwt");
return this._http.get('api/Employee/EditEmployeeGet?id=' + id, {
  headers: new HttpHeaders({
    "Authorization": "Bearer " + token,
    "Content-Type": "application/json"
  })
})
  .map((data: Employees) => {
    this.employee = data;
    return true;
  });
}

и это контроллер API, я отправляю свой запрос API / Employee / EditEmployee

  [Authorize(AuthenticationSchemes = 
  JwtBearerDefaults.AuthenticationScheme)]
    [HttpGet("[action]")]
    public IActionResult EditEmployeeGet(int id)
    {
       var emp = _repo.GetEmployeeById(id);
        return Ok(emp);
    }

это мой editEmployee.component.html

 <div class="row">
     <div class="">
       <div class="container">
         <h1>Edit Employee</h1>
         <div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}} 
     </div>
      <form (ngSubmit)="onSubmit()"  #employeeForm="ngForm" novalidate>
        <div class="form-group">
          <label for="name">Name</label>
          <div class="col-md-4">
            <input type="text" class="form-control" [(ngModel)]="emps.employeeName" name="employeeName">
            <!--<span class="text-danger" *ngIf="name.invalid && formDir.submitted">
              Name is required.
            </span>-->
          </div>
        </div>

        <div class="form-group">
          <label for="city">City</label>
          <div class="col-md-4">
            <input type="text" class="form-control" [(ngModel)]="emps.employeeCity" name="employeeCity">
            <!--<span class="text-danger" *ngIf="city.invalid && formDir.submitted">
              City is required
            </span>-->
          </div>
        </div>
        <button type="submit" class="btn btn-success" [disabled]="!employeeForm.form.valid">Submit</button>

      </form>
    </div>
  </div>

</div>

Answer 1

Измените код вашей ссылки на маршрутизатор на следующий, завершающий символ '/' не может соответствовать указанному вами маршруту:

[routerLink]="['/edit', emp.employeeId]"

Также в вашем компоненте вы должны получить параметры, используя "id":

this._avRoute.snapshot.params['id']

Но лучшим подходом является вызов службы в хуке жизненного цикла ngOnInit() вместо constructor. Вам необходимо подписаться на Observable ActivatedRoute.params, который будет реагировать на изменение параметра в URL.

@Component({
  selector: 'hello',
  template: `<h1>Employee Details</h1>
             <div *ngIf="emps$ | async; let emps">
                  <h3> Id: {{emps.id}}</h3>
                  <h3> Name: {{emps.name}}</h3>
                  <h3> Age: {{emps.age}}</h3>
             </div>`,
  styles: [`h1, h3 { font-family: Lato; }`]
})
export class EditEmployeeComponent   {

  emps$: Observable<any>;

  constructor(private _empService: EmployeeService, private _avRoute: ActivatedRoute, private _fb: FormBuilder){

  }
  ngOnInit(){
    this._avRoute.params.subscribe(params => {
        this.emps$ = this._empService.getEmployeeDetails(params['id']);
    });
  }
}

Я создал небольшое демо для вас: https://stackblitz.com/edit/angular-hdvpzm