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

Question

我是 Angular 的新手，所以如果这个问题听起来有点不对劲，请原谅我，但我在理解如何在这个项目中实现编辑时遇到问题。单击编辑链接后，我希望将 ID 发送到 EditEmployeeComponent.ts这是我的路线{ path: 'edit/:id', component: EditEmployeeComponent },在app.module.ts这里是锚标记：<a class="btn" [routerLink]="['/edit/',emp.employeeId]" >Edit</a>EditEmployeeComponent.tsimport { 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;  });}

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