Ionic V6 - 一旦用 ng-if 过滤，离子段在卡片之间显示太多空白

Question

I have added ion-segment to my page which has a list of cards with different cases. If I don't use segment, the space between the cards is very normal. However, with the use of the segment I have to do the following to filter the data by status variable value. It leaves several big gaps between the cards. The height of the gap between the cards is based on the id of the card. For example - if the first id for a closed case is 55, second id for a closed case is 20, and third id for a closed case is 17. I see a much larger gap between the case id 55 and 20 than 20 and 17.

<ion-toolbar >
<ion-segment value="open" [(ngModel)]="selectedTabs">
  <ion-segment-button value="open">
    Open
  </ion-segment-button>
  <ion-segment-button value="closed">
    Closed
  </ion-segment-button>
  <ion-segment-button value="underreview">
    Under Review
  </ion-segment-button>
</ion-segment>
</ion-toolbar>

<!-- code for the cards -->
<ion-card *ngFor="let feed of feedData | filter:searchTerm" [routerLink]="[feed.id]">

   <div *ngIf="selectedTabs == 'open'">
  
      <div *ngIf="feed.status == 'Open'">
       
         Show open case data

      </div>

     <div *ngIf="feed.status == 'Closed'">
       
         Show closed case data

     </div>

   ... there are few more status codes but this should give you the idea
   </div>

</ion-card>

Answer 1

The answer turned out to be a rather simple one, even though it cost me half a day. Need to create another DIV on the top.

<div *ngFor="let feed of feedData | filter:searchTerm" [routerLink]="[feed.id]">

All other DIVS as needed. 

  <ion-card>
     Card Contents
  </ion-card>

</div>