why do I get a blank space in the false element statements-CodePudding

hello I'm getting a blank space in the page and that's what I get when I want to inspect the page bindings={ "ng-reflect-ng-if": "false" } and I found out that I'm getting a a blank cards here is an image for it :

`<section >
  
  <h1 >play N Win</h1>
 <div >
 <div *ngFor="let item of games; index as i">
 
    <mat-card  *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 >  
            <img  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>`

CodePudding user response：

The ngfor is creating those extra elements because they are in the array (games) that you are ngFor-ing

The solution is to instead ngFor over a smaller array, or use a pipe

In your class

get first12Games(){
return this.games ? this.games.slice(0,12) : [];
}

Then in the html

*ngFor="let item of first12Games;

And then you won't have to use *ngIf="i<=11"

Technically it's best practice to use pipes https://angular.io/guide/pipes for this, but an optimization like that isn't a concern in a smaller project.