0

tengo div con una directiva *ngFor donde muestra unos cards para mostrar productos pero si pongo la condicional de *ngIf para que los productos agotados no se muestren donde iria el card de ese producto queda el espacio en blanco

dejo el fragmento del codigo

<div class="col-xxl-3 col-xl-3 col-lg-4 col-md-4 col-xs-12" id="divContainer" *ngFor="let propiedad of propiedades | paginate: { itemsPerPage: 8, currentPage: page }">
            <div class="card" *ngIf="propiedad.mostrar">
            <!-- <div class="card"> -->
                <img src="https://marinoinmobiliaria.onrender.com/{{propiedad.imagen1}}" class="card-img-top" alt="...">
                <div class="card-body">
                    <p id="zonaCard">cod. {{propiedad.zona}} {{propiedad.codigo}}</p>
                    <h5 class="card-title">{{propiedad.tipoUnidad}} | {{propiedad.tipoOperacion}}</h5>
                    <p class="card-text">{{propiedad.tipoMoneda}}
                        {{propiedad.precio}}</p>
                    <p class="card-text d-xs-none line-clamp">{{propiedad.descripcion}}</p>
                    <a [routerLink]="['/detalle-prop', propiedad._id]" routerLinkActive="router-link-active"
                        class="btn btn-primary btnVerMas" (click)="verDetalles(propiedad._id)">Ver mas...</a>
                </div>
            </div>
        </div>

1 respuesta 1

2

Eso pasa porque se crea la columna pero el contenido no. Lo que se debe hacer es evitar crear la columna.

Para eso se puede usar ng-container para alojar el ngFor y colocar el ngIf en el div que lleva la columna:

<ng-container *ngFor="let propiedad of propiedades | paginate: { itemsPerPage: 8, currentPage: page }">
    <div *ngIf="propiedad.mostrar" class="col-xxl-3 col-xl-3 col-lg-4 col-md-4 col-xs-12" id="divContainer" >
                <div class="card" >
                <!-- <div class="card"> -->
                    <img src="https://marinoinmobiliaria.onrender.com/{{propiedad.imagen1}}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <p id="zonaCard">cod. {{propiedad.zona}} {{propiedad.codigo}}</p>
                        <h5 class="card-title">{{propiedad.tipoUnidad}} | {{propiedad.tipoOperacion}}</h5>
                        <p class="card-text">{{propiedad.tipoMoneda}}
                            {{propiedad.precio}}</p>
                        <p class="card-text d-xs-none line-clamp">{{propiedad.descripcion}}</p>
                        <a [routerLink]="['/detalle-prop', propiedad._id]" routerLinkActive="router-link-active"
                            class="btn btn-primary btnVerMas" (click)="verDetalles(propiedad._id)">Ver mas...</a>
                    </div>
                </div>
            </div>
</ng-container>

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.