Ionic 5 ng 如果显示空卡

Question

当我使用纵向模式时 *ngIf 它隐藏了我想要的值，但是当我将设备设置为横向模式时，它显示的是真实值之间的空白卡片。

<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngFor="let order of orders">
            <ion-card *ngIf="order.status =='CL'">
                <ion-card-title>
                    <h4>{{order.title}}</h4>
                </ion-card-title>
                <ion-card-content>
                    <ion-item>
                        <h4>{{order.description | filter:[200, '...']}}</h4>
                    </ion-item>
                </ion-card-content>
                <ion-button type="button" color="danger">Canceled</ion-button>
                <ion-button type="button" color="primary">Delivered</ion-button>
            </ion-card>
        </ion-col>

Answer 1

问题是您隐藏了卡片，但仍然留下一个空列。请尝试同时隐藏卡片和列：

<ng-container *ngFor="let order of orders">
  <ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngIf="order.status =='CL'">
    <ion-card > 
      ...
    </ion-card>
  </ion-col>
</ng-container>

Ionic 5 ng 如果显示空卡

Ionic 5 ng if showing empty card

ionic4