Ionic 2 shows empty <ion-items> using *ngIf and *ngFor


#1

I try to display vehicles’s company based on their service type using “ion list”, but in my browser is rendered:

My presuption is, that this empty row occurs because my first element is of type “fitment”:

My HTML implementation is
:

Do you have any ideas how to get rid of these empty “ion items” ?

Maybe another “sorting” type would be more appropiate ?

Thanks


#2

It’s because you only do *ngIf inside the ion-item, because of this all ion-item will be generated, but some without a p since the *ngIf removes the p. What you would want is to have both *ngFor and *ngIf on the same element, but this isn’t possible.

While it is possible to do what you want only in HTML (see ng-container) it is recommended to filter these in your controller instead. Either try ionSelect on your ion-segment-button (see ion-segment-button).