我试图在组件的模板中显示存储在服务中的数据，但没有显示它们，显然我将它们打印为白色。例如，如果我输入{{this.hostlistService.infurniture [0]}}，请只显示“ hello”。我通过api保存了保存在服务中的数据，如果执行console.log则将其显示给我。有任何想法吗？这是代码：
服务：
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Inmueble } from '../modelos/inmueble';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class HostlistService {
inmuebles: Inmueble[] = [];
cabecera = {
'Accept': 'application/json',
'Authorization': ""
}
parametros = {
'grant_type':'client_credentials',
'client_id': 3,
'client_secret': ''
}
constructor(public http: HttpClient) {
}
obtenerToken(){
return this.http.post<any>('https:',this.parametros);
}
obtenerInmuebles(resultToken){
this.cabecera.Authorization=resultToken.token_type+" "+resultToken.access_token;
console.log("----->"+this.cabecera.Authorization);
return this.http.get<any>('',{ headers: new HttpHeaders(this.cabecera) });
}
}
组件的.ts和模板：
import { Component, OnInit, Input } from '@angular/core';
import { HostlistService } from '../servicios/hostlist.service';
import { Inmueble } from '../modelos/inmueble';
import { mergeMap } from 'rxjs/operators';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
z: number=0;
url: string = "URL";
constructor(public hostlistService: HostlistService) { }
ngOnInit() {
this.hostlistService.obtenerToken()
.pipe(
mergeMap(resultToken => {
//do whatever you want to do with the token
//i.e. Save the token in the localstorage like this -
localStorage.setItem("token",resultToken.access_token);
return this.hostlistService.obtenerInmuebles(resultToken);
})
)
.subscribe(
result => {
this.cargarJson(result);
},error =>{
console.log(error);
}
);
}
/*this.hostlistService.getInmuebles().subscribe(
result => {
console.log("-----------_>"+result.data);
},error => {
console.log(error);
}
);*/
/*
anteriorInmueble(){
(this.i<=0) ? this.i=680: this.i=this.i-5;
console.log("AntIn VALOR DE I: "+this.i);
siguienteInmueble(){
(this.i>=680) ? this.i=0: this.i=this.i+5;
console.log("SigIn VALOR DE I: "+this.i);
}*/
// metodo para cargar el Json recibido de la petición
cargarJson(result){
var foto1,foto2: string;
foto1 = "fot0", foto2 = "fot";
var precio: number=0;
var i,j: number=1;
for(const item of result.data) {
var pos: number=0; //variable que define la posicion a almacenar en el vector
pos =0;
console.log("POS----->"+pos);
var inmueble = new Inmueble();
inmueble.fotos = [];
inmueble.nombre = item.nomb_prod_c;
inmueble.id = item.id_c;
inmueble.estacionamiento = item.estan_c;
inmueble.baño = item.banof_c;
precio = item.price;
precio = Math.round(precio*100)/100;
inmueble.precio = precio;
(item.fot01_c != "") ? (inmueble.fotos[pos]="fot01_c", pos++): (inmueble.fotos[pos]="");
(item.fot02_c != "") ? (inmueble.fotos[pos]="fot02_c", pos++): (inmueble.fotos[pos]="");
(item.fot03_c != "") ? (inmueble.fotos[pos]="fot03_c", pos++): (inmueble.fotos[pos]="");
(item.fot04_c != "") ? (inmueble.fotos[pos]="fot04_c", pos++): (inmueble.fotos[pos]="");
(item.fot05_c != "") ? (inmueble.fotos[pos]="fot05_c", pos++): (inmueble.fotos[pos]="");
(item.fot01_c != "") ? (inmueble.fotos[pos]="fot06_c", pos++): (inmueble.fotos[pos]="");
(item.fot02_c != "") ? (inmueble.fotos[pos]="fot07_c", pos++): (inmueble.fotos[pos]="");
(item.fot03_c != "") ? (inmueble.fotos[pos]="fot08_c", pos++): (inmueble.fotos[pos]="");
(item.fot04_c != "") ? (inmueble.fotos[pos]="fot09_c", pos++): (inmueble.fotos[pos]="");
(item.fot05_c != "") ? (inmueble.fotos[pos]="fot10_c", pos++): (inmueble.fotos[pos]="");
(item.fot01_c != "") ? (inmueble.fotos[pos]="fot11_c", pos++): (inmueble.fotos[pos]="");
(item.fot02_c != "") ? (inmueble.fotos[pos]="fot12_c", pos++): (inmueble.fotos[pos]="");
(item.fot03_c != "") ? (inmueble.fotos[pos]="fot13_c", pos++): (inmueble.fotos[pos]="");
(item.fot04_c != "") ? (inmueble.fotos[pos]="fot14_c", pos++): (inmueble.fotos[pos]="");
(item.fot05_c != "") ? (inmueble.fotos[pos]="fot15_c", pos++): (inmueble.fotos[pos]="");
(item.fot01_c != "") ? (inmueble.fotos[pos]="fot16_c", pos++): (inmueble.fotos[pos]="");
(item.fot02_c != "") ? (inmueble.fotos[pos]="fot17_c", pos++): (inmueble.fotos[pos]="");
(item.fot03_c != "") ? (inmueble.fotos[pos]="fot18_c", pos++): (inmueble.fotos[pos]="");
(item.fot04_c != "") ? (inmueble.fotos[pos]="fot19_c", pos++): (inmueble.fotos[pos]="");
(item.fot05_c != "") ? (inmueble.fotos[pos]="fot20_c", pos++): (inmueble.fotos[pos]="");
if(pos == 0){
inmueble.fotos[pos]="n";
}
this.hostlistService.inmuebles.push(inmueble); //se almacena el inmueble en el vector de inmuebles
}
//console.log("************:"+this.inmuebles[1].fotos[0]);
}
anteriorInmueble(){
(this.z<=0)? this.z=680: this.z=this.z-1;
}
siguienteInmueble(){
(this.z>=680)? this.z=0: this.z=this.z+1;
}
consultarPais(){
}
}<div class="container" id="contenedor-global">
<div class="d-flex justify-content-center align-items-center">
<div class="d-flex align-items-center justify-content-center">
<div> <span class="text-hot">
<b>HOT</b> </span> </div>
</div>
<div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center">
<div class="text-hot align-middle">
list
</div>
</div>
</div>
<div *ngIf="this.hostlistService.inmuebles && this.hostlistService.inmuebles.length ; else espera">
<h1>holaaaa [ {{this.hostlistService.inmuebles[0].fotos[0]}} ]</h1>
<div class="carousel slide " data-ride="carousel" data-interval="false" id="multi_item">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="" *ngIf="this.hostlistService.inmuebles[0].fotos[0]!=''; else sino">
<!-- <h1>{{inmuebles[z].nombre}}</h1> -->
<img class="card-img-top" id="imgPortada" src="{{url}}{{this.hostlistService.inmuebles[z].id}}_{{this.hostlistService.inmuebles[z].fotos[0]}}" alt="Card image cap">
</div>
<ng-template #sino>
<img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
</ng-template>
<div class="card-body ">
<div class="">
<i class="fas fa-cart-plus "></i> <h6 class="d-inline-flex ml-2" >Precio: {{this.hostlistService.inmuebles[i].precio}}</h6>
</div>
<div class="">
<i class="fas fa-map-marker-alt"></i> <h6 class="d-inline-flex ml-2">Ubicacion</h6>
</div>
<div class="">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
</div>
<!-- Modal -->
<app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="" *ngIf="this.hostlistService.inmuebles[z+1].fotos[0]!=''; else sino">
<!-- <h1>{{inmuebles[z+1].nombre}}</h1> -->
<img class="card-img-top" id="imgPortada" src="{{url}}{{this.hostlistService.inmuebles[z+1].id}}_{{this.hostlistService.inmuebles[z+1].fotos[0]}}" alt="Card image cap">
</div>
<ng-template #sino>
<img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
</ng-template>
<h1>{{inmuebles[z+1].fotos[0]}}</h1>
<div class="card-body">
<div class="d-inline-flex">
<i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+1].precio}}</h6>
</div>
<div class="d-inline-flex">
<i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
<!-- Modal -->
<app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="" *ngIf="inmuebles[z+2].fotos[0]!=''; else sino">
<!-- <h1>{{inmuebles[z+2].nombre}}</h1> -->
<img class="card-img-top" id="imgPortada" src="{{url}}{{this.hostlistService.inmuebles[z+2].id}}_{{this.hostlistService.inmuebles[z+2].fotos[0]}}" alt="Card image cap">
</div>
<ng-template #sino>
<img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
</ng-template>
<div class="card-body">
<div class="d-inline-flex">
<i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+2].precio}}</h6>
</div>
<div class="d-inline-flex">
<i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
<!-- Modal -->
<app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="" *ngIf="inmuebles[z+3].fotos[0]!=''; else sino">
<!-- <h1>{{inmuebles[z+3].nombre}}</h1> -->
<img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[z+3].id}}_{{inmuebles[z+3].fotos[0]}}" alt="Card image cap">
</div>
<ng-template #sino>
<img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
</ng-template>
<div class="card-body">
<div class="d-inline-flex">
<i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+3].precio}}</h6>
</div>
<div class="d-inline-flex">
<i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
<!-- Modal -->
<app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="" *ngIf="inmuebles[z+4].fotos[0]!=''; else sino">
<!-- <h1>{{inmuebles[z+4].nombre}}</h1> -->
<img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[z+4].id}}_{{inmuebles[z+4].fotos[0]}}" alt="Card image cap">
</div>
<ng-template #sino>
<img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
</ng-template>
<div class="card-body">
<div class="d-inline-flex">
<h6>Precio: {{inmuebles[i+4].precio}}</h6>
</div>
<div class="d-inline-flex">
<i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
<!-- Modal -->
<app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="" *ngIf="inmuebles[z+5].fotos[0]!=''; else sino">
<!-- <h1>{{inmuebles[z+5].nombre}}</h1> -->
<img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i+5].id}}_{{inmuebles[i+5].fotos[0]}}" alt="Card image cap">
</div>
<ng-template #sino>
<img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
</ng-template>
<div class="card-body">
<div class="d-inline-flex">
<i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+5].precio}}</h6>
</div>
<div class="d-inline-flex">
<i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
<!-- Modal -->
<app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" (click)="anteriorInmueble()" href="#multi_item" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" (click)="siguienteInmueble()" href="#multi_item" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<ng-template #espera>Esperando datos...</ng-template>
</div>