如何在 Ionic 5 中使用 ngIf;else

Question

我尝试了下面的代码来显示数据，如果没有数据，它会显示一条消息。但是没用。

<ng-container *ngFor="let payment of orderTotals">

<ng-template *ngIf="payment?.length==0; else data">
  <h4>No Data</h4>
</ng-template>

<ng-template #data>

  <ion-card>
    <ion-card-title>
      <h4 class="ion-text-center" style="font-weight: bold">
        {{payment.PaymentStatus}}
      </h4>
    </ion-card-title>
    <ion-card-subtitle style="padding-left: 10px">
      <h4 style="font-weight: bold">{{payment.Total | currency:'KWD '}}</h4>
    </ion-card-subtitle>
  </ion-card>

</ng-template>

Answer 1

使用 [ngIf]="condition" 代替 *ngIf 。

我发现下面的内容 link 对理解这些概念非常有用。

everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet

Answer 2

我自己用下面的方法修复了它。我删除了 ng-container 和 ng-template 并使用 div 标记对其进行了验证。

<div *ngIf="orderTotals.length==0">
<h4>No Data</h4>
</div>

<ion-card *ngFor="let payment of orderTotals">
<ion-card-title>
  <h4 class="ion-text-center" style="font-weight: bold">
    {{payment.PaymentStatus}}
  </h4>
</ion-card-title>
<ion-card-subtitle style="padding-left: 10px">
  <h4 style="font-weight: bold">{{payment.Total | currency:'KWD '}}</h4>
</ion-card-subtitle>
</ion-card>

如何在 Ionic 5 中使用 ngIf;else

How to use ngIf;else in Ionic 5

angular

ionic-framework

frontend

angular8

rest