cdkVirtualFor occupy height and show scroll even if there is single item Angular 6

<tr *cdkVirtualFor="let p of products;let i = index;">
                        <ng-container *ngIf="listView || (!listView && p.totalPrice > 0)">
                            <td>
                                <div class="itemsSet">
                                    <!-- <span class="product_image"><img src="../../../../Content/images/{{p.imageUrl}}"></span> -->
                                    <span class="product_brand"><img
                                            src="../../../../Content/images/{{p.supplierLogoUrl}}"></span>
                                    <span class="product_name" (mouseover)="showProductDetail(p);op1.toggle($event)">
                                        {{p.title}} <i class="fa fa-info-circle"></i>
                                    </span>
                                </div>
                            </td>
                            <td style="text-align: left;">{{p.brandValue}}</td>
                            <td>{{p.packText}}</td>
                            <td>{{p.sizeText}}{{p.sizeUOMValue}}</td>
                            <td><span class="color_green">{{(p.price != 0 ? (p.price | currency : 'USD') : 'TBD')}}</span>
                            </td>
                            <td>
                                <input type="number" class="form-control" min="0" [disabled]="p.price == 0"
                                    (change)="calculateTotalPrice(p)" (keyup)="calculateTotalPrice(p)" [(ngModel)]="p.qty"
                                    oninput="validity.valid||(value='');">
                            </td>
                            <td>{{p.totalPrice | currency : 'USD'}}</td>
                            <td>
                                <!-- Product Compare Overlay Panel Button -->
                                <a href="javascript:void(0);" (click)="showSimilarItemsOverlay($event, p.supplierProductId)"
                                    [ngClass]="{'color_green':p.compareflag == 0,'color_red':p.compareflag != 0 }"><i
                                        class="fa fa-tags"></i><i class="fa fa-chevron-down"></i>
                                </a>
                            </td>
                            <td><button type="button" (click)="toggleFavorite(p)"><i class="fa"
                                        [class.fa-plus-circle]="!p.favorite" [class.fa-trash]="p.favorite"></i></button>
                            </td>
                        </ng-container>
                    </tr>

I've used cdkVirtualFor for virtually loading data into table. but when I hide the row using ngIf, it still show the blank rows and occupy space.

If I use ngFor, it is working properly.

enter image description here

enter image description here