1

estoy haciendo un binding entre 2 componentes de angular, tengo lo siguiente:

Este es el codigo completo de mis 2 componentes:

Esto es de la componente 1:

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 {
  inmuebles: Inmueble[] = [];
  z: number=0;

  url: string = "http://crm.seaconfiable.com/upload/";

  constructor(private 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.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="inmuebles!=null; else espera">-->
  <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="inmuebles[z].fotos[0]!=''; else sino">
                  <!-- <h1>{{inmuebles[z].nombre}}</h1> -->

                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[z].id}}_{{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: {{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 [prueba]="inmuebles[0]" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal> <!-- ***  BINDING **** -->

              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[z+1].fotos[0]!=''; else sino">
                  <!-- <h1>{{inmuebles[z+1].nombre}}</h1> -->
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[z+1].id}}_{{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 [prueba]="inmuebles[0]" 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}}{{inmuebles[z+2].id}}_{{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 [prueba]="inmuebles[0]" 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 [prueba]="inmuebles[0]" 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 [prueba]="inmuebles[5]" 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 [prueba]="inmuebles[6]" 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>

Este es el còdio de mi otra componente:

import { Component, OnInit, Input} from '@angular/core';
import { Inmueble } from '../modelos/inmueble';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  @Input() prueba: Inmueble;
  constructor() { }

  ngOnInit() {
  	console.log("=============="+this.prueba.nombre);
  }

  

}
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <div class="alert alert-primary text-center" style="width: 100%;" role="alert"> <h1> HOLA {{prueba.nombre}} </h1></div>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="d-flex flex-row">

    <div class="d-inline-flex" style="width: 100px; height:100px;"> <img src="../assets/images/slider/2.jpg" alt="">   </div>
    <div class="d-inline-flex ml-2" style="width: 100px; height:100px;"> <img src="../assets/images/slider/3.jpg" alt="">   </div>
    <div class="d-inline-flex ml-2" style="width: 100px; height:100px;"> <img src="../assets/images/slider/4.jpg" alt="">   </div>
    </div>

    <div class="" id="cont-descripcion">
      <p class="text-center">Descripcion</p>
    </div>

    <table class="table table-borderless">
      <tbody>
        <tr>
          <thead>
              <tr>
                <th><i class="fas fa-map-marker-alt"></i> Ubicacion: </th>
              </tr>
          </thead>
        </tr>
        <tr class="">
          <td class="text-center"> <i class="fas fa-bath fa-2x "></i> <p> Baños: 1 <p> </td>
          <td class="text-center"> <i class="fas fa-hot-tub fa-2x"></i> <p> Baños de Servicio: 1 <p> </td>

          <td class="text-center"> <i class="fas fa-bed fa-2x"></i> <p> Habitaciones: 2 <p> </td>
        </tr>
        <tr>
          <td class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br/>metros construidos: 100</td>
          <td class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br/>metros de terreno: 100</td>
          <td class="text-center"> <input type="checkbox" value="1" name="chVerTutoriales" onclick="btTutorial.disabled = !this.checked"><br/>Pago Condominio</td>
        </tr>
        <tr>
          <thead>
            <tr>
              <th>Caractetisticas Adicionales</th>
            </tr>
          </thead>
        </tr>
      </tbody>

    </table>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

Mi gran problema es que no me quiere mostrar los valores en el .html, fijense que en el .ts tengo un Console.log del valor y eso si me lo imprime con sus valores, pero el problema esta en el .html, no imprime nada. cual es el problema? tengo horas en esto y no logro solucionar. agradeceria su ayuda. gracias de antemano. Saludos!

2
  • ¿Qué es lo que te sale en pantalla, simplemente "Hola"? Commented el 13 jun. 2019 a las 15:29
  • Si, simplemente "Hola", el valor de la variable no, y en la consola si me lo muestra, no entiendo porque.
    – JulianProg
    Commented el 13 jun. 2019 a las 15:37

1 respuesta 1

0

Reproducí tu código y me marcó error al inicializar la variable, por lo que realicé lo siguiente:

export class SliderComponent implements OnInit {
    inmuebles: Inmueble[] = [];

    constructor(){
        this.inmuebles.push(new Inmueble());
        this.inmuebles[0].nombre = "jose";
    }
}

Como no tienes ningún objeto, no se le asigna nada y por esa razón el binding no se ve reflejado.

6
  • Hola Carlos. Eso que escribiste creo que ya lo estoy haciendo, solo que no escribi el detalle. lo tengo asi: var inmueble = new Inmueble(); inmueble.fotos = []; inmueble.nombre = item.nomb_prod_c; inmueble.fotos[pos]="n"; this.inmuebles.push(inmueble); //se almacena el inmueble en el vector de inmuebles
    – JulianProg
    Commented el 13 jun. 2019 a las 16:15
  • No veo nada extraño en tu código para que no funcione el binding, siento que nombre está siendo null o undefined y por eso sólo muestra "Hola". Revisa si item.nomb_prod_c es null o undefined. A mi me funcionó bien el binding.
    – Carlos
    Commented el 13 jun. 2019 a las 16:32
  • el item.nomb_prodc_c esta lleno con un nombre, y el gran problema es que por console.log si me lo imprime, el problema es al hacer el binding, no logro entender que esta pasando.
    – JulianProg
    Commented el 13 jun. 2019 a las 16:34
  • Entonces el error es más sutil y no creo que se pueda encontrar con el código que has publicado ya que a mi me funcionó realizando solo esa pequeña modificación.
    – Carlos
    Commented el 13 jun. 2019 a las 16:46
  • termine colocando los codigos completos a ver si puedes ayudarme a identificar el problema amigo.
    – JulianProg
    Commented el 13 jun. 2019 a las 17:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.