如何在 Ionic 5 中使用 ngIf;else答案

【问题标题】：How to use ngIf;else in Ionic 5如何在 Ionic 5 中使用 ngIf;else
【发布时间】：2021-07-06 22:31:06
【问题描述】：

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

<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>

【问题讨论】：

您检查的长度错误。 <ng-template *ngIf="orderTotals.length == 0"> <h4>No Data</h4> </ng-template>

标签： angular ionic-framework frontend angular8 rest

【解决方案1】：

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

我发现下面的链接对理解这些概念非常有用。

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

【讨论】：

谢谢，但没有帮助。

【解决方案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>

【讨论】：