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.