Question

我正在尝试使用MEAN堆栈开发一个简单的crud应用程序，但是在尝试发布表单值时，角度服务未发出发布请求。得到请求的作品完美，但不能发布。我正在使用摩根（Morgan）查看对nodejs服务器的请求，但未收到发布请求，所有这些似乎都与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)     
  }
}

Answer 1

扩大R. Richards的评论，而无需在帖子中订阅Observerable永远不会触发。一个Observerable只是一个函数定义（某种），它需要对其进行订阅才能真正使调用运行。

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

我们需要调用该函数以使某些事情发生，而Observable就是这种情况：我们需要订阅它才能使其起作用！

取自3 common Angular Rxjs Pitfalls

请查看该链接上的示例，以查看丢失的内容。

Answer 2

可观察对象是懒惰的，除非您订阅它们，否则在承诺的情况下它们将不会被填充。

因此，您将需要subscribe进行可见调用，就像在获取api调用中所做的一样。

Answer 3

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

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

3 个答案: