在 CRUD angular 应用程序中插入新记录后，新条目未在表中反映

Question

在 Angular 13 中，我创建了员工的基本 CRUD 应用程序。 当我插入新数据并点击提交时，运行 createEmployee() 服务并在控制台上打印数据。 然后它重定向到主页，该主页显示表中调用 getEmployeeList() 的所有条目。 但有时它显示新创建的条目，有时它不显示。 在数据库中它完美地输入了。 当我转到其他页面并返回主页时，它会显示。

创建员工.components.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from 'src/app/employee';
import { EmployeeService } from 'src/app/Services/employee.service';

@Component({
 selector: 'app-create-employee',
 templateUrl: './create-employee.component.html',
 styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {

 employee: Employee = new Employee();

 constructor(private employservice: EmployeeService,private router: Router) { }

 ngOnInit(): void {

 }

 saveEmployee() {
   this.employservice.createEmployee(this.employee).subscribe(data => {
     console.log(data);
   })
   console.error();
 }

 gotoemployeelist() {
   this.router.navigate(['employees']);
 }

 onSubmit() {
   this.saveEmployee();
   this.gotoemployeelist();
 }

}

员工服务.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import { Employee } from '../employee';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  public baseURL="http://localhost:8080/api/v1/employees";

  constructor(private httpClient: HttpClient) {}

  getEmployeeList(): Observable<Employee[]> {
    return this.httpClient.get<Employee[]>(this.baseURL).pipe(
      map(employees => {
        for(let employee of employees) {
          employee.bdate = new Date(employee.bdate);
          employee.jdate = new Date(employee.jdate);
        }
        console.log("Employees Service: GetEmployee() called");
        return employees;
      }));
  }

  createEmployee(employee: Employee): Observable<Object> {
    console.log("Employees Service: CreateEmployee() called");
    return this.httpClient.post(this.baseURL,employee);
  }

  getEmployeebyId(id: Number): Observable<Employee> {
    console.log("Employees Service: GetEmployeeById() called");
    return this.httpClient.get<Employee>(this.baseURL+"/"+id);
  }

  updateEmployee(employee: Employee,id: number): Observable<Object> {
    console.log("Employees Service: UpdateEmployee() called");
    console.log(employee);
    return this.httpClient.put(this.baseURL+"/"+id,employee);
  }

  deleteEmployee(id: number): Observable<Object> {
    console.log("Employees Service: DeleteEmployee() called");
    return this.httpClient.delete(this.baseURL+"/"+id);
  }

}

主页-component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from 'src/app/employee';
import { EmployeeService } from 'src/app/Services/employee.service';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css',]
})
export class EmployeeListComponent implements OnInit {
  
  employees: Employee[];

  constructor(private employeeservice: EmployeeService,private router: Router) { 
    
    
  }

  ngOnInit(): void {
    this.getEmployees();
  }

  private getEmployees() {
    this.employeeservice.getEmployeeList().subscribe(data => {
      console.log(data);
      this.employees=data;
    });
  }

  updateEmployee(id: Number) {
    this.router.navigate(['update-employee',id]);
  }

  deleteEmployee(id: number) {
    this.employeeservice.deleteEmployee(id).subscribe(data => {
      console.log(id+"employeed Deleted.");
      this.getEmployees();
    });
  }

  employeeDetails(id: number) {
    this.router.navigate(['emloyee-details',id]);
  }

}

在控制台中，您可以看到 createEmployee() 调用然后 GetEmployee() 调用，然后在导航后打印 console.log(newEntry)。

Answer 1

正在发生的事情程序不是在导航到主页之前等待完成 createEmployee API。 只有在收到 createEmployee API 的响应后，您才需要调用 gotoemployeelist()。 您可以通过调用订阅中的方法来做到这一点

 saveEmployee() {
   this.employservice.createEmployee(this.employee).subscribe(data => {
     console.log(data);
     this.gotoemployeelist();
   })
   console.error();
 }

 gotoemployeelist() {
   this.router.navigate(['employees']);
 }

 onSubmit() {
   this.saveEmployee();
 }