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

ionic-v1
1

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

image

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

My HTML implementation is
:

image
e.png763×617 41.5 KB

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).