时间戳

首页 > 解决方案 > 如何使用 Angular 模板将 Id 反对的对象从服务器加载到我的表单中

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

问题描述

我是 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/Employee/EditEmployee的 api 控制器

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

标签： javascriptc#angular

解决方案

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

[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

推荐阅读