我在我的頁面中添加了 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>
uj5u.com熱心網友回復：
答案竟然是一個相當簡單的答案，盡管它花了我半天的時間。需要在頂部創建另一個 DIV。
<div *ngFor="let feed of feedData | filter:searchTerm" [routerLink]="[feed.id]">
All other DIVS as needed.
<ion-card>
Card Contents
</ion-card>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/481821.html