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">×</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!