Estoy realizando una aplicación con angular, la misma tiene un listado de productos y si doy click en cualquiera de los productos me lleva a la pagina individual de cada uno.
<div class="container">
<div class="card-columns mt-3">
<div class="card" *ngFor="let i of contenido; let b = index;" style="width: 18rem">
<img src= "{{i.img}}" class="card-img-top img-fluid" alt="card image cap" id="img" />
<div class="card-body">
<h5 class="card-title">{{i.casa}} <a href="#" class="badge badge-success"> Nuevo</a></h5>
<p class="card-text">{{i.descrip}}</p>
<h6>Valor {{i.valor}}</h6>
<button [routerLink]="['/producto',b]" class="btn btn-primary">Ver Casa</button>
</div>
</div>
</div>
</div>
Ahora creo un método llamado getcasa, el cual recibe un numero como parámetro y hace un return de uno de los objetos que contiene el array de objetos llamado contenido:
getcasa(b: number): Content {
return this.contenido[b];
}
Ahora en el componente del producto individual, llamo al servicio (contenido) y obtengo el parámetro. Una vez que ya tengo el valor del parámetro que recibo por url (que es de tipo number), se lo paso como parámetro al método getcasa y lo alojo en la propiedad casa.
this.ruta.params.subscribe(params => {
this.casa = this.contenido.getcasa(params['id']);
});
Luego hago la interpolación en el template del componente:
<div class = "col-md-4">
<img src="{{casa.img}}" class="img-fluid" alt="">
<br/>
<h3>Casa {{casa.casa }}</h3>
<h3 class="mt-3">{{casa.valor}}</h3>
<i class="fas fa-credit-card"></i><a routerLink="/contacto" > Ver medios de pago</a>
<button routerLink="/contacto" *ngIf="casa.condicion === 'alquilar'" class="btn btn-outline-primary btn-block col-md-4 mt-2">Reservar</button>
<button routerLink="/contacto" *ngIf="casa.condicion === 'reservar'" class="btn btn-outline-primary btn-block col-md-4 mt-2">Contactar</button>
</div>
Es aquí donde comienza el problema: En el template del producto quiero colocar una div que tenga 6 cards , bajo el titulo te puede interesar, para eso en el servicio realicé un método el cual filtra los objetos que tengan como condición alquilar y luego si esos objetos no tienen la misma imagen que el producto, los colocará dentro de un nuevo array llamado filtro:
getalquiler(casa: any = {}) {
const ventas = this.contenido.filter((obj) => obj.condicion === 'alquilar');
ventas.forEach(element => {
if (element.img !== casa.img) {
this.filtro.push(element);
}
});
return this.filtro;}
Ahora en el componente del producto llamo a este servicio y le paso como parámetro la propiedad casa, con el fin de que en el template del producto individual no se muestren dos objetos con la misma imagen.
this.alquiler = this.contenido.getalquiler(this.casa);
Ahora hago la interpolación de la propiedad alquiler en el template y funciona bien:
<h4 *ngIf="casa.condicion === 'alquilar'">Te puede interesar <hr/></h4>
<div class="card-columns mt-3" *ngIf="casa.condicion === 'alquilar'">
<div class="card" *ngFor="let i of alquiler; let b = index;" style="width: 18rem">
<img src= "{{i.img}}" class="card-img-top img-fluid" alt="card image cap" id="img" />
<div class="card-body">
<h5 class="card-title">{{i.casa}} <a href="#" class="badge badge-success"> Nuevo</a></h5>
<p class="card-text">{{i.descrip}}</p>
<h6>Valor {{i.valor}}</h6>
<button [routerLink]="['/producto',b]" class="btn btn-primary">Ver Casa</button>
</div>
</div>
</div>
Pero el problema ocurre cuando le doy click a cualquiera de estas cards de la sección te puede interesar , ya que si bien me dirige a la pagina individual del producto , pero no me respeta el método de que impide colocar en el template dos objetos con la misma imagen.
Disculpen por tanto texto, quiero explicar el problema de forma más detallada pero tengo temor a distraerlos o a que se pierda el problema entre tantas palabras.