Ionic V6 - 一旦用 ng-if 過濾，離子段在卡片之間顯示太多空白

Question

我已將 ion-segment 添加到我的頁面，其中包含不同情況下的卡片列表。 如果我不使用段，卡之間的空間是很正常的。 但是，通過使用段，我必須執行以下操作以按狀態變量值過濾數據。 它在卡片之間留下了幾個大的差距。 卡片之間的間隙高度基於卡片的id。 例如 - 如果關閉案例的第一個 ID 為 55，關閉案例的第二個 ID 為 20，關閉案例的第三個 ID 為 17。我發現案例 ID 55 和 20 之間的差距比 20 和 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

答案竟然是一個相當簡單的答案，盡管它花了我半天的時間。 需要在頂部創建另一個 DIV。

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

All other DIVS as needed. 

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

</div>