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

Question

我已将 ion-segment 添加到我的页面，其中包含不同情况下的卡片列表。如果我不使用段，卡之间的space是很正常的。但是，通过使用段，我必须执行以下操作以按状态变量值过滤数据。它在卡片之间留下了几个大的差距。卡片之间的间隙高度基于卡片的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>

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

Ionic V6 - ion-segment show too much white space between cards once filtered with ng-if

angular

ionic-framework

ionic6