2

Estoy trabajando con Angular 7 y tengo un API REST que me devuelve esto:

{"Placa":"MIN123","Certificaciones":[{"Archivo":"KIO","fecha":"12-02-2018","Nombre":1},{"Archivo":"KIO","fecha":"12-02-2018","Nombre":1},{"Archivo":"preventiva","fechai":"06-02-2018","fechav":"12-02-2018","Nombre":2},{"Archivo":"preventiva","fechai":"06-02-2019","fechav":"25-03-2019","Nombre":2}],"Lugares":[{"lugar":"inicio","fecha":"12-02-2018","Direccion":"Cra 99 No.69A 81"},{"lugar":"Fin","fecha":"12-02-2018","Direccion":"Cra 89 No.69A 81"}],"Inconvenientes":[{"lugar":"Fin","fecha":"12-02-2018","Direccion":"Cra 89 No.69A 81","Descripcion":"No reporta"}],"id":"5c7c990de5b1660fb032dc8b"}

por medio del link: "http://localhost:3000/api/Carros/5c7c990de5b1660fb032dc8b" mi APP de Angular la tengo asi:

Mi servicio

//data-api.service.ts
import { Injectable } from '@angular/core'; 
import {HttpClient,HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable' ;
import { map } from 'rxjs/operators';
import { VehiculoInterface } from '../Modelo/vehiculo-interface';

@Injectable({
    providedIn: 'root'
})
export class DataAPIService {
    vehiculos: Observable<any>;
    vehiculo: Observable<any>;
    constructor(private http:HttpClient) { }

    getVehiculoByID(id: string){
     const url_api = 'http://localhost:3000/api/Carros/${id}';
     this.vehiculo=this.http.get(url_api);
     console.log(this.vehiculo);
     return (this.vehiculo);
    } 
}

Segun lo que he leido de interfaces mis interfaces son asi:

Certificaciones

//vcertificaciones-interface.ts
export interface vcertificacionesInterface{
    Archivo ?: string;
    fecha ?: string;
    Nombre ?: number;
}

Inconvenientes

//vinconvenientes-interface.ts
export interface vinconvenientesInterface{
    lugar ?: string;
    fecha ?: string;
    direccion ?: string;
    Descripcion?:string;
}

Lugares

//vlugares-interface.ts
export interface vlugaresInterface{
    lugar ?: string;
    fecha ?: string;
    direccion ?: string;
}

Vehiculos

//vehiculo-interface.ts
import {vcertificacionesInterface} from "./vcertificaciones-interface";
import {vinconvenientesInterface}from "./vinconvenientes-interface";
import {vlugaresInterface}from "./vlugares-interface";

export interface VehiculoInterface{
    Placa ?: string;
    Estado ?: number;
    Certificaciones ?:vcertificacionesInterface[];
    Inconvenientes ?: vinconvenientesInterface[];
    Lugares ?: vlugaresInterface[];
}

y por el momento quiero mostrarlo por consola, pero obiamente lo voy a poner en el HTML. Entonces implemente mi componente asi:

//detalles-vehiculos.component.ts
import { Component, OnInit } from '@angular/core';
import { DataAPIService } from 'src/app/Servicios/data-api.service';
import { ActivatedRoute,Params } from '@angular/router';
import { VehiculoInterface } from 'src/app/Modelo/vehiculo-interface';
@Component({
  selector: 'app-detalles-vehiculos',
  templateUrl: './detalles-vehiculos.component.html',
  styleUrls: ['./detalles-vehiculos.component.css']
})
export class DetallesVehiculosComponent implements OnInit {

  constructor(private dataAPI:DataAPIService,private route: ActivatedRoute) { }
  private vehiculo: VehiculoInterface={
    Placa :'',
    Estado :null,
    Certificaciones:null,
    Inconvenientes:null,
    Lugares:null
  }
  ngOnInit() {
    const vehiculoid=this.route.snapshot.params['id'];
    this.getDetails(vehiculoid);
    console.log(this.vehiculo);
  }

  getDetails(id:string){
    this.dataAPI.getVehiculoByID(id)
      .subscribe(vehiculo => this.vehiculo = vehiculo);
      console.log(this.vehiculo);
  }

}

y no he podido me sale este error y la verdad si estoy perdido porque el API REST si funciona y no entiendo

GET http://localhost:3000/api/Carros/$%7Bid%7D 404 (Not Found)

ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:3000/api/Carros/$%7Bid%7D", ok: false, …}

Creo, que lo que tengo mal, es como lo tomo por el componente, fui lo mas descriptivo que pude con mi problema, por favor ayudenme.

1 respuesta 1

0

Creo que el error no está en el código que has puesto. Vamos a intentar deducir el problema:

  • Un error 404 significa que la URL que estás usando es incorrecta.

  • El error que te da es GET http://localhost:3000/api/Carros/$%7Bid%7D 404 (Not Found).

  • Esa URL tiene caracteres escapados, decodifiquémosla:

console.log(decodeURI('http://localhost:3000/api/Carros/$%7Bid%7D'));

  • Por tanto, tenemos que la URL usada es http://localhost:3000/api/Carros/${id}.

  • Conclusión: En tu service querías usar un string template pero en lugar de usar las comillas correspondientes:

    let url=`http://localhost:3000/api/Carros/${id}`;
    

    Has usado las de un string normal:

    let url='http://localhost:3000/api/Carros/${id}';
    
1
  • pero de igual forma, me deja todo vacio {Placa: "", Estado: null, Certificaciones: null, Inconvenientes: null, Lugares: null} Certificaciones: null , Estado: null Inconvenientes: null Lugares: null Placa: "" proto: Object ayudame por favor @Pablo Commented el 15 mar. 2019 a las 19:04

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.