如何通过Angular CLI中的接口查询带有阵列的REST API？

我正在使用Angular 7，我有一个REST API返回以下内容：

{"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"}

通过链接：“我的Angular应用程序我有这样的功能：

//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);
  }

}

我的服务

//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);
    } 
}

缺点

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

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

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

//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[];
}

位置

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

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

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

//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[];
}

车辆

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

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

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

//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[];
}

目前我想通过控制台显示它，但显然我会将它放在HTML中。 然后像这样实现我的组件：

//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);
  }

}

结果是一个空对象。

---

我想，我错的是，我是如何看待组件的，我尽可能地描述了我的问题，请帮助我。

你的方法

getVehicleById

是一个可观察的，所以当你记录

this.vehicleulo

时，它还没有解决，试着把你的

控制台.log（this.vehicleulo）

完成以下任务后：

this.dataAPI.getVehicleById（id）
.订阅（车辆=>{
this.vehiculo=vehiculo；
控制台日志（this.vehiculo）；
});