Question

我正在尝试将表单数据发布到网络api中，我为此提供了服务，但由于某种原因，我一直都收到404错误请求？我的服务是：

postIncidents(): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, {})
    .pipe(catchError(this.handleError));
}

Component.ts

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { ServicenowService } from '../../services/servicenow.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, } from '@angular/common/http';



@Component({
  selector: 'app-service-request',
  templateUrl: './service-request.component.html',
  styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {


  public loading = false;

  private customer_id = 7; /// this.appComponent.customer_id;

  serviceForm;

  u_destination_country = [
    { name: 'Choose an option' },
    { name: 'United Kingdom', },
    { name: 'United States of America', },
    { name: 'Russia', },
    { name: 'Moscow', },
    { name: 'Africa', },
  ];

  users = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  devices = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  constructor(private service: ServicenowService,
    private appComponent: AppComponent,
    private router: Router,
    private http: HttpClient

  ) {
  }

  ngOnInit() {
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      //u_caller_id: new FormControl(this.users[0], Validators.required),
      s_id: new FormControl('', Validators.required),
      u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
      u_phone_number: new FormControl('', Validators.required),
      //u_serial_number: new FormControl(this.devices[0], Validators.required),
      short_description: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(80)
      ])),
      u_message_description: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    var data = "s_id=" + this.serviceForm.value.s_id;
    this.service.postIncidents().subscribe((data) => {});
    (error) => {
      console.log(error);
    }
    console.log("data has gone");
    this.loading = false;
    if (data)
    this.router.navigate(['/incident/confirmation']);
    else 
    this.router.navigate(['/']);
  }
}

发布请求必须具有s_id和customer_id。为了使它正常工作，我现在仅发送s_id，因为customer_id是隐藏的输入字段。

customer_id只是表单上的隐藏值。

我超级困惑有帮助吗？谢谢

Answer 1

您永远不要使用data变量，它应该是postIncidents(id: number)的参数，并在api调用中使用：

postIncidents(id: number): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, id)
    .pipe(catchError(this.handleError));
}

，然后在您的组件中：

onSubmit() {
    var data = "s_id=" + this.serviceForm.value.s_id;
    this.service.postIncidents(data)
    .subscribe(
        (data) => { // success
            if (data)
                this.router.navigate(['/incident/confirmation']);
            else 
                this.router.navigate(['/']);
        },
        (error) => console.log(error), // error
        () => { // complete
            console.log("data has gone");
            this.loading = false;
        }
    );
  }

Answer 2

您必须将数据传递给服务功能：

postIncidents(data): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, data)
    .pipe(catchError(this.handleError));
}

onSubmit() {
    var data = "s_id=" + this.serviceForm.value.s_id;
    this.service.postIncidents(data).subscribe(response => {console.log(response});
    //rest of your code
}

如果它不起作用，我想知道您的控制台中有什么。

将数据从表单发布到Angular中的api网址时出错

2 个答案: