1

tengo un problema al enviar cabeceras en angular tengo un buscador en la pagina de inicio de esta manera

home.page.html

<ion-searchbar [(ngModel)]="search" (ionChange)="resultadoBusqueda()"></ion-searchbar>

en home.page.ts

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { ServiceApiService } from '../api/service-api.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  search: any;
  constructor ( public serviceApiService : ServiceApiService, public loadingController: LoadingController){}

resultadoBusqueda(){
    this.serviceApiService.buscarProductos(this.search).subscribe(
      post=>{
        this.search = post;
        console.log(this.search);
    });
  }
}

y tengo un service donde hago las peticiones

service-api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpInterceptor} from '@angular/common/http';

const apiUrl = "http://localhost/globaltruck/api/";
@Injectable({
  providedIn: 'root'
})
export class ServiceApiService {
  constructor( private http: HttpClient) { }

buscarProductos(term){

    let headers = new HttpHeaders({
      'Content-Type':'application/x-www-form-urlencoded',
      'producto': term
    });

    return this.http.post(apiUrl+'busqueda', {}, { headers} );

  }
}

cuando pruebo la aplicacion recibo un 404 como se puede ver introducir la descripción de la imagen aquí

y cuando le quito el " 'producto': term " si recibo una respuesta pero es un JSON de error propio de la Api, que se repite en un bucle infinito, y el value del buscador cambia a "[Object object]" cabe decir que cuando hago la búsqueda desde Postman esta se realiza sin problemas. introducir la descripción de la imagen aquí

hay otra manera de enviar cabeceras en angular? gracias de antemano

1

2 respuestas 2

1
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ProductoService {
    public url: string;
    constructor(private _http: Http) {
        this.url = 'http://backend.com:8000';
    }


    postProducto(term: any) {
    const headers = new Headers();
    /** In Angular 5, including the header Content-Type can invalidate your request */
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Accept', 'application/json');
    headers.append('producto', term);
    const options = new RequestOptions({ headers: headers });

    return this._http.post(this.url, {}, options)
        .map(res => res.json()
        .catch(error => Observable.throw(error))
        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        ));
    }
}

// Actualice mi respuesta para que observes el código completo

@Component({
  selector: 'app-keeper',
  templateUrl: './keeper.component.html',
  styleUrls: ['./keeper.component.css'],
  providers: [ProductoService]
})
export class component{

  constructor(private _productoService: ProductoService) {
    Object.assign(this, { single, multi });
   }

   emitirEvento() {
      this._productoervice.postProducto("Producto").subscribe(
        response => {
          console.log(response);
          if (!response) {
            alert('Error con el servidor');
          } else {
            console.log('todo bien');
            alert('Producto dado de alta');
          }
        },
        error => {
            alert('error en la peticion');
        }

      );
    }
}

// Aquí un ejemplo breve de mi implementación

8
  • Hola, RequestOptions de donde lo traigo? de '@angular/http' ?
    – ragnamex
    Commented el 13 mar. 2019 a las 2:42
  • ` import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import 'rxjs/add/operator/map'; import { Observable } from 'rxjs/Observable'; ` Disculpa, olvide incluir mis imports, estos son los que utlizó
    – David Leal
    Commented el 13 mar. 2019 a las 3:02
  • Pero en efecto tienes razón, desde esa liberia utilizo ese import
    – David Leal
    Commented el 13 mar. 2019 a las 3:05
  • me marca error en 'options' al ponerlo en el return ...post(.., .., options)
    – ragnamex
    Commented el 13 mar. 2019 a las 3:07
  • Actualice mi respuesta, para que veas un ejemplo de mi implementación, si sale un error me gustaría saber el detalle de tu error
    – David Leal
    Commented el 13 mar. 2019 a las 3:20
1

Yo siempre creo un método genérico para este tipo de casos

export class HttpPostService {

private serverUrl = "http://ejemplo.com/apidriver";

constructor(private http: HttpClient) { }

postData(data: any, route: string) {
    let options = this.createRequestOptions();
    return this.http.post(this.serverUrl + route, data, { headers: options });
}

private createRequestOptions() {
    let headers = new HttpHeaders({
        "Content-Type": "application/json"
    });
    return headers;
}

}

Donde route es la otra parte de la api que voy a consultar, y data son los valores que voy a enviar por ejemplo { busqueda : "esto buscare" }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.