Why is *ngIf still rendering empty boxes und how can I fix this issue?-CodePudding

I'm trying to build an HTML where objects of an array will be put out using Angular. Also I want the output not so show objects of the array which are empty. I managed that the content of the object does not show up. However the boxes in which this content is are still showing up. Hopefully someone can help me to resolve this issue.

HTML:

<div class=content>
 <div class=data-item *ngFor="let item of dataSource">
  <div *ngIf="item.Value != ''" >
   <div>{{item.Header}}</div>
   <div>{{item.Value}}</div>
  </div>
 </div>
</div>

CSS:

.content {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.data-item{
flex: 0 0 21%;
border-style: solid;
}

TS:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular '   VERSION.major;

  dataSource: items[] = [
    {Header: 'Header A1', Value: 123},
    {Header: 'Header B2', Value: 234},
    {Header: 'Header C3', Value: ''},
    {Header: 'Header D4', Value: 456},
    {Header: 'Header E5', Value: ''},
    {Header: 'Header F6', Value: 678},
    {Header: 'Header G7', Value: 789},
  ]
}

export interface items{
  Header: string;
  Value: any;
}

Here's a picture of the rendered HTML: Rendered HTML

CodePudding user response：

Use ng-container to avoid extra div and assign CSS class to the div which you used for *ngIf

HTML file

<div class=content>
<ng-container  *ngFor="let item of dataSource">
 <div *ngIf="item.Value != ''" class=data-item>
  <div>{{item.Header}}</div>
  <div>{{item.Value}}</div>
 </div>
</ng-container>
</div>

stackblitz example

CodePudding user response：

The problem is your *ngFor still creates the item.

You can't prevent these items from being displayed with an *ngIf because an element cannot have both.

To solve this problem, you need to limit dataSource to only contain the items you want to display.

There are a number of ways to do this, but my suggestion would be to use a pipe.

@Pipe({
  name: 'filterOutEmptyData',
})
export class FilterOutEmptyDataPipe implements PipeTransform {
  transform(
    input: items[]
  ): items[] {
    return input?.filter(item => item.Value !== '');
  }
}

Then, in your HTML template,

<div class=data-item *ngFor="let item of (dataSource | filterOutEmptyData)">

Don't forget to add the pipe to your module.

CodePudding user response：

Try this:

<div class=content>
  <ng-container *ngFor="let item of dataSource">
    <div  *ngIf="!!item.Value">
       <div>{{item.Header}}</div>
       <div>{{item.Value}}</div>
    </div>
  </ng-container>
</div>

A little explanation: in your original code you're putting the condition only in the content of the box, not in the box (with the border) itself.

Additional: ngContainer is not rendered, so you can make use of it to add the loop.