1

Estoy realizando una aplicación que maneja productos y, los tipos de estos. Estoy mostrandolos dependiendo el stock del producto:

<mat-tab-group class="demo-tab-group">
<mat-tab label="{{ type.name }}" *ngFor="let type of productService.productTypes">
    <div class="container-fluid">
        <div class="row">
            <div *ngFor="let product of productService.products" class="col-2 mb-r">
                <br>
                <div class="card border-danger" *ngIf="(product.Type == type.name)" >
                    <mat-card class="example-card">
                        <img  mat-card-image src="http://localhost/img/{{ product.image }}" alt="Photo of a Shiba Inu">
                        <h4 >{{ product.name }}</h4>
                        <mat-card-content>
                            {{ product.Type }}
                            <mat-chip-list>
                                <mat-chip color="accent" selected="true">product outta stock</mat-chip>
                            </mat-chip-list>
                            Price: Q {{ product.price }}
                            <div class="card border-danger" style="margin-bottom: 20px;">
                                <button mat-button (click)="goToDetails(product.idProduct)">detail</button>
                            </div>
                        </mat-card-content>
                    </mat-card>
                </div>
            </div>
        </div>
    </div>
</mat-tab>

El primer for recorre todos los tipos, el segundo cada producto y, finalmente si el tipo de producto concuerda con el nombre del tipo, se imprime una card del material design de angular.

El problema con el que me encontré fué este:

introducir la descripción de la imagen aquí

Me crea una columna vacía, donde no hay nada, y donde deberían ir las demas cards que se generan.

¿Tienes alguna idea de como puedo evitar que se creen estas columnas vacías y, que todas las cards esten ordenadas de manera correcta?

1 respuesta 1

1

El problema es que tienes un *ngFor que va a crear sí o sí un div, y luego tienes un *ngIf que decide si se rellena o no. Una solución simple es la siguiente: transforma tu código actual

<div *ngFor="let product of productService.products" class="col-2 mb-r">
  <br>
  <div class="card border-danger" *ngIf="(product.Type == type.name)" >
   ...
  </div>
</div>

a esto:

<ng-container *ngFor="let product of productService.products">
  <div *ngIf="(product.Type == type.name)" class="col-2 mb-r">
    <br>
    <div class="card border-danger"  >
     ...
    </div>
  </div>
</ng-container>

el tag ng-container no muestra nada, es un "truco" de angular para poder iterar sin tener que envolver cualquier código en un elemento HTML

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.