Question

我看到了多个类似的问题，即使不是全部，我也尝试了大多数解决方案，但我认为我缺少Angular的一些基本知识。我有一个updateEmployee组件，该组件从HTTP服务接收数据，该服务应预先填充表单，以便员工可以编辑他/她的数据。问题是，我总是收到错误“无法读取'名称'的属性”，并且对于其他字段也一样。好像页面在返回数据之前就渲染了，这很有意义，但是我不知道如何解决这个问题。也许我需要从.ts文件中“手动”填充表单？这是我的代码，基本上是教程的副本，但是我照原样提供了它，希望它是对的。

employee-edit.component.html

<div class="container custom-container">
  <div class="col-md-12">

    <h3 class="mb-3 text-center">Update Employee</h3>

    <div class="form-group">
      <input type="text" [(ngModel)]="employeeData.name" class="form-control" placeholder="Name">
    </div>

    <div class="form-group">
      <input type="text" [(ngModel)]="employeeData.email" class="form-control" placeholder="Email">
    </div>

    <div class="form-group">
      <input type="text" [(ngModel)]="employeeData.phone" class="form-control" placeholder="Phone">
    </div>

    <div class="form-group">
      <button class="btn btn-success btn-lg btn-block" (click)="updateEmployee()">Update Employee</button>
    </div>

  </div>
</div>

employee-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { RestApiService } from "../shared/rest-api.service";
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-employee-details',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.css']
})

export class EmployeeEditComponent implements OnInit {
  id = this.actRoute.snapshot.params['id'];
  employeeData: any = {};

  constructor(
    public restApi: RestApiService,
    public actRoute: ActivatedRoute,
    public router: Router
  ) { 
  }

  ngOnInit() { 
    this.restApi.getEmployee(this.id).subscribe((data: {}) => {
      this.employeeData = data;
    })
  }

  // Update employee data
  updateEmployee() {
    if(window.confirm('Are you sure, you want to update?')){
      this.restApi.updateEmployee(this.id, this.employeeData).subscribe(data => {
        this.router.navigate(['/employees-list'])
      })
    }
  }

}

rest-api.service.ts

  // HttpClient API get() method => Fetch employee
  getEmployee(id): Observable<Employee> {
    return this.http.get<Employee>(this.apiURL + '/employees/' + id)
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }

employee.ts

export class Employee {
   id: string;
   name: string;
   email: string;
   phone: number;
}

Answer 1

您几乎可以做到，因为您知道使用路由解析器作为在页面呈现之前重新整理数据的方式。但是，由于您仍在ngOnInit（）方法中检索数据，因此未正确使用它。为时已晚，因为页面已经渲染。这里是how to use route resolvers的清晰说明。路由解析器的好处是，您还可以添加进度动画，并在无法检索数据时防止进入页面，从而提供良好的用户体验。

Answer 2

感谢Phillip Ngan，现在一切正常。 Resolver可以完美运行，我真正需要从他指向我的教程中进行更改的唯一一件事就是我不得不将Resolver更改为Employee Resolve> Great day at office

如何确保从REST服务返回数据，然后在表单字段中使用数据的页面渲染之前

2 个答案: