0
285
Views¿Por qué aparece un espacio en blanco en las declaraciones de elementos falsos?
hola, aparece un espacio en blanco en la página y eso es lo que obtengo cuando quiero inspeccionar los enlaces de la página = {"ng-reflect-ng-if": "false"} y descubrí que obtengo aa tarjetas en blanco aquí hay una imagen para ello: 
`<section class="play-n-win-section"> <h1 class="play-n-win-paragraph">play N Win</h1> <div class="card-container"> <div *ngFor="let item of games; index as i"> <mat-card class="cards" *ngIf="i <= 11"> <mat-card-header> <mat-card-title>{{item.game_name}}</mat-card-title> <mat-card-subtitle>{{item.game_description}}</mat-card-subtitle> </mat-card-header> <div class="game-cover-container"> <img class="game-cover" mat-card-image src="{{item.game_cover_url}}" alt="{{item.game_name}}"> </div> <mat-card-content> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages </p> </mat-card-content> </mat-card> </div> </div> <a mat-button routerLink="playandwin ">Link</a> </section>`
·
Juan Pablo Isaza
1 answers
Answer question0
El ngfor está creando esos elementos adicionales porque están en la matriz ( games ) que está ngFor-ing
La solución es, en cambio, ngFor sobre una matriz más pequeña, o usar una tubería
En tu clase
get first12Games(){ return this.games ? this.games.slice(0,12) : []; }Luego en el html
*ngFor="let item of first12Games; Y entonces no tendrás que usar *ngIf="i<=11"
Técnicamente, es una buena práctica usar tuberías https://angular.io/guide/pipes para esto, pero una optimización como esa no es una preocupación en un proyecto más pequeño.
·
Juan Pablo Isaza
Report
Answer question