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

Question

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

创建-employee.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();
 }

}

员工-service.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()。您可以通过调用 subscribe

中的方法来完成此操作

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

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

 onSubmit() {
   this.saveEmployee();
 }

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

New Entry Not reflacting in table after inserting New record in CRUD angular app

node.js

angular

angularjs

typescript

components