estoy comenzandon con Angular. tengo un servicio el cual se conecta a una API y me devuelve un Json. el json viene como un vector de objetos y lo que quiero hacer es poder devolver un vector en el que pueda iterar normalmente escribiendo vector[i].nombre desde el .html de la componente donde importo dicho servicio ya que actualmente puedo acceder al vector es haciendo vector[i][i].nombre como puedo hacerlo? hasta ahora lo que tengo es lo siguiente pero me da error.
este es el servicio:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Inmueble } from '../modelos/inmueble';
@Injectable({
providedIn: 'root'
})
export class HostlistService {
inmuebles: Inmueble[];
vector: any[];
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'text/html',
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD, OPTIONS'
})
}
constructor(public http: HttpClient) {
}
getInmuebles():Inmueble[]{
this.http.get('URL',this.httpOptions).subscribe(
result => {
this.vector = Object.values(result)
this.vector[1][1].nomb_prod_c;
this.inmuebles[0].nombre = this.vector[1][1].nomb_prod_c;
for (let i=0; i<=3; i++){
//this.inmuebles[i].nombre=this.vector[1][i].nomb_prod_c;
//console.log(this.inmuebles[0].nombre);
//console.log(this.vector[1][i].nomb_prod_c);
console.log(this.inmuebles[0]);
}
}
);
return this.inmuebles;
}
}
esta es la interfaz donde defino el tipo inmueble:
export interface Inmueble {
nombre: string;
id: string;
estacionamiento: number;
baño: number;
foto1: string;
foto2: string;
foto3: string;
foto4: string;
foto5: string;
precio: number;
}
aqui esta la componente donde lo llamo y en el .html de esta componente es donde quisiera mostrar los datos del vector:
import { Component, OnInit } from '@angular/core';
import { HostlistService } from '../servicios/hostlist.service';
import {$,jQuery} from 'jquery';
import { Inmueble } from '../modelos/inmueble';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
inmuebles: any[];
i = 1;
url: string = "d782a4ae-733f-b7c4-ed11-5ba553455e04_fot01_c";
constructor(private hostlistService: HostlistService) { }
ngOnInit() {
//console.log(this.url);
this.inmuebles=this.hostlistService.getInmuebles();
//console.log(this.inmuebles[0].nombre);
}
anteriorInmueble(){
this.i=this.i-1;
}
siguienteInmueble(){
this.i=this.i+1;
}
}
Y este es el error que me esta mostrando en consola:
ERROR TypeError: "_this.inmuebles is undefined"
getInmuebles hostlist.service.ts:31
RxJS 11
Angular 8
core.js:15724
Angular 4
RxJS 5
Angular 11
Aqui estan unas fotos reales del archivo Json: