角度不会向节点js rest API发出发布请求

Posted 2023-03-24

【中文标题】角度不会向节点js rest API发出发布请求

【英文标题】：angular does not make post request to node js rest API

【发布时间】：2021-01-27 03:16:04

【问题描述】：

我正在尝试使用 MEAN 堆栈开发一个简单的 crud 应用程序，但是在尝试发布表单值时，角度服务没有发出发布请求。获取请求可以完美运行，但不能发布。我正在使用 morgan 查看对 nodejs 服务器发出的请求，但它没有接收到 post 请求，并且似乎与 angular 文档中的方式相同。我导入了 HttpClient 模块。

empleados.component.html

<form [formGroup]="nuevoEmpleado" (submit)="addEmpleado()">
    <label>
        Nombre:
        <input type="text" formControlName="nombre">
    </label>
    <label>
        Apellido:
        <input type="text" formControlName="apellido">
    </label>
    <label>
        Cargo:
        <input type="text" formControlName="cargo">
    </label>
    <button class="btn btn-primary" type="submit">Agregar Nuevo Empleado</button>
</form>


 nuevoEmpleado.value | json 


<div class="main-container">
    <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Nombre</th>
            <th scope="col">Apellido</th>
            <th scope="col">Cargo</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor = "let empleado of listaEmpleados">
            <th> empleado.index </th>
            <td> empleado.nombre </td>
            <td> empleado.apellido</td>
            <td> empleado.cargo </td>
          </tr>       
        </tbody>
      </table>
</div>

empleados.component.ts

import  Component, OnInit  from '@angular/core';
import  FormGroup , FormControl  from '@angular/forms';
import  EmpleadosService  from './empleados.service'
import  Empleado  from '../../clases/empleado'

@Component(
  selector: 'app-empleados',
  templateUrl: './empleados.component.html',
  styleUrls: ['./empleados.component.css']
)
export class EmpleadosComponent implements OnInit 
  listaEmpleados: Empleado[];
  
  nuevoEmpleado = new FormGroup(
    nombre: new FormControl(''),
    apellido: new FormControl(''),
    cargo: new FormControl('')
  );

  constructor(private empleadosService: EmpleadosService)  

  getEmpleados()
      this.empleadosService.getEmpleados().subscribe(empleados => this.listaEmpleados = empleados);
  

  addEmpleado()
      this.empleadosService.addEmpleado(this.nuevoEmpleado.value);        
  

 
 

  ngOnInit(): void 
    this.getEmpleados();
    this.addEmpleado();
  

empleados.service.ts

import  Injectable  from '@angular/core';
import  HttpClient , HttpErrorResponse  from '@angular/common/http';
import  Observable  from 'rxjs';
import  Empleado  from '../../clases/empleado'

@Injectable(
  providedIn: 'root'
)
export class EmpleadosService 

  
  
  //url = 'assets/config.json'
  url = 'http://localhost:3000'
  constructor(private http: HttpClient)  

  getEmpleados():Observable<Empleado[]>
    return this.http.get<Empleado[]>(this.url);
  

  addEmpleado(nuevoEmpleado: Empleado)
    console.log(nuevoEmpleado);
    return this.http.post<Empleado>(this.url , nuevoEmpleado)     
  

【问题讨论】：

你需要subscribe post call。

addEmpleado() 的结果是一个 Observable。查找 Observables 或 http.post 调用的示例！

比你，我订阅了，现在它正在工作

【参考方案1】：

扩展 R. Richards 的评论，在没有订阅帖子调用的情况下，Observerable 永远不会触发。 Observerable 只是一个函数定义（有点），它需要订阅它才能真正让调用运行。

observable 本身只是一种处理值流的方式的定义。我们可以将其视为接近函数的东西。创建一个 observable 有点类似于声明一个函数，函数本身只是一个声明。调用函数是完全不同的，因为定义一个函数并不会执行它的代码。

我们需要调用函数才能让某些事情发生，Observable 也是如此：我们需要订阅它才能让它工作！

取自3 common Angular Rxjs Pitfalls

查看该链接上的示例以了解您缺少什么。

【参考方案2】：

Observables 是懒惰的，除非你订阅它们，否则它们不会被完全填充，如果 Promise 可以工作的话。

所以你需要subscribe到你的post call observable，就像你在get api call中所做的那样。

【参考方案3】：

您必须订阅，因为在进行返回 observable 的 http 调用时，请记住 observable 本质上是惰性的。