Post 请求未发送到服务器

Question

我正在尝试 post 数据到我的 API 我从表格中提取的数据。

问题是它根本不会尝试发送 post 请求。 Register.component.ts:

import { Component, OnInit } from '@angular/core';
import { RegisterService } from '../register.service';
import { FormGroup, FormBuilder, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
import { user } from '../user'
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public myForm: FormGroup;
  public submitted: boolean;
  public events: any[] = [];

  constructor(private registerService: RegisterService, 
  private _fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = new FormGroup({
      username: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
      email: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
      org_number: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
      password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)])
    });
  }

  save(model: user, isValid: boolean){
    this.submitted = true;
    this.registerService.postUser(model)
    console.log(model, isValid)
  }

它正在调用的服务：

import { Injectable } from '@angular/core';
import { user } from './user';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators'
import { HttpClient, HttpHeaders } from '@angular/common/http';

const HttpOptions = {
  headers: new HttpHeaders({ 'Content-type': 'application/json' })
};
const HttpOption2 = {
  headers: new HttpHeaders({ 'Content-type': 'application/x-www-form-urlencoded' })
}
@Injectable({
  providedIn: 'root'
})
export class RegisterService {

  private usersUrl= 'api/v1/accounts';

  constructor(
    private http: HttpClient,

  ) { }

  getUsers(): Observable<user[]> {
    return this.http.get<user[]>(this.usersUrl)
  }
  postUser(object): Observable<user[]>{
    console.log(object)
    console.log('Did it enter this?')
    return this.http.post<user[]>(this.usersUrl, user, HttpOptions)
  }
}

我的代码输出了预期的信息：用户名：'username'、电子邮件：'email' 等

而且我知道它会调用该函数，因为它还会输出：'Did it enter this?'.

我的 API 没有收到 post 请求，我不知道为什么。我一直在 official angular Httpclient 页面以及大量 Stack overflow post 上寻找答案，我尝试添加 .subscribe 但我得到错误类型订阅无法分配给可观察用户类型，如果我添加 .map() 我得到那个地图在可观察用户类型上不存在，如果我添加 .pipe() 我没有收到错误消息，但仍然没有 Post-request。而如果我添加 .pipe( catchError(this.handleError('addHero', 英雄)) ); 我得到 type observable user is not assignable to type observable user。有什么想法吗？

Answer 1

您需要订阅请求才能被调用，

  this.registerService.postUser(model).subscribe(result => this.result =result);

确保声明一个名为 result 的变量来分配响应的数据，

result : any;

Post 请求未发送到服务器

Post Request not Sent to Server

forms

angular

angular-httpclient