angular - 如何通过 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"}
通过链接:“ http://localhost:3000/api/Carros/5c7c990de5b1660fb032dc8b ”我的Angular APP我有这样的:
我的服务
//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[];
}
目前我想通过控制台显示它,但显然我会把它放在 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);
}
}
结果是一个空对象。我认为,我错了,是我如何将它作为组件,我尽可能描述我的问题,请帮助我。
解决方案
您的方法getVehiculoByID
是可观察的,因此当您记录this.vehiculo
它尚未解决时,请尝试将您console.log(this.vehiculo)
的放在分配之后,如下所示:
this.dataAPI.getVehiculoByID(id)
.subscribe(vehiculo => {
this.vehiculo = vehiculo;
console.log(this.vehiculo);
});
推荐阅读
- email - 通过电子邮件将 PDF 附件发送到 Google 表格
- java - 使用户注销
- r - 如何识别列表中各列的模式匹配索引
- powerquery - PowerQuery 中的数据转换
- python - KeyError:向电子邮件添加标签时出现 b'X-GM-LABELS' 问题
- winapi - 我正在构建 win32 应用程序,它在截屏时清空剪贴板。但图像没有清空
- awk - 根据第一列的字符将行分配给文件(使用 awk)
- python - pandas str.replace 无法正常工作
- c# - Entity Framework Core 中的种子脚本正在破坏我的迁移
- c - 谁能解释这种语法?字符 *seats[14][7];