Не могу показать данные сервиса в шаблоне

Question

Я пытаюсь показать данные, хранящиеся в сервисе, в шаблоне компонента, но он не показывает их, по-видимому, я печатаю их белым цветом. если я поставлю, например, Hi {{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>