Javascript 如何使用Angular模板将Id对象从服务器加载到我的表单中

我是angular的新手，所以如果这个问题听起来有点离题，请原谅我，但我在理解如何在这个项目中实现编辑方面有问题

单击编辑链接后，我希望Id被发送到

EditEmployeeComponent.ts

这是我的路线

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

在

app.module.ts

中，以下是锚定标签：

编辑

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

这也是我的员工服务课

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

 <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>

这是我发送请求给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

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

 <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>

编辑员工
{{errorMessage}}
名称
城市
提交

在路由器链接中将代码更改为，尾随“/”无法与您定义的路由匹配：

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

此外，在组件中，还必须使用

“id”

获取参数：

但是更好的方法是在

ngOnInit（）

生命周期钩子中调用服务，而不是在

构造函数中调用服务。您需要订阅
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']);
    });
  }
}

@组件({
选择器：“你好”，
模板：`雇员详细资料
Id:{{emps.Id}
名称：{{emps.Name}
年龄：{{emps.Age}
`,
样式：[`h1，h3{font-family:Lato；}`]
})
导出类EditEmployeeComponent{
emps$：Observable
更新了我的答案，希望能有所帮助！感谢您帮助我理解我的错误所在。现在可以使用了。