如何在ionic html模板中编写条件语句

Posted 2023-03-13

【中文标题】如何在ionic html模板中编写条件语句

【英文标题】：how to write conditional statement inside ionic html template

【发布时间】：2017-09-04 17:13:19

【问题描述】：

我正在将我的应用程序从 jquery 移植到 ionic 框架。 在 jquery 中，我正在编写 javascript 代码来手动连接 html 标签。 从 jquery 代码中粘贴相同的一部分

  for ( count = start - 1; count < end ; count ++ )
            
                if (tranList[count].tranType == "R" )
                    tranType = "Redeem" ;
                else 
                    tranType = "Earn";

                text += "<tr> <td>"+ tranType +  "</td>" ;

在 Ionic 中，我正在尝试使用 ionic list 编写相同的代码 下面是我的html模板

 <ion-list>
    <ion-item *ngFor="let tran of transactions">
     <p> tran.pointsEarned </p> 
    </ion-item>
  </ion-list>

在 pointsEarned 旁边，我需要打印积分兑换或赚取类似于 jquery 代码。我如何做到这一点？

【参考方案1】：

另一种处理条件模板的方法是使用 *ngIf 如果表达式 tran.tranType 为 'R' ，则显示内联模板。即您已兑换（表达式 tran.pointsRedeemed 的值）积分。

<ion-content>
  <ion-list>
    <ion-item *ngFor="let tran of transactions">      
      <p *ngIf=" tran.tranType == 'R'" > You have redeemed  tran.pointsRedeemed points.  </p>
      <p *ngIf=" tran.tranType == 'E'" > You have earned  tran.pointsEarned points.  </p>  
    </ion-item>
  </ion-list>
</ion-content>
</ion-content>

【参考方案2】：

我不确定到底是什么问题，但你可以写一个这样的条件语句：

  <ion-list>
    <ion-item *ngFor="let tran of transactions">
     <p> tran.pointsEarned  tran.tranType === 'R' ? 'Redeem' : 'Earn' </p> 
    </ion-item>
  </ion-list>

有很多方法可以做到这一点，但我想ternary operator 是最简单和最干净的方法。

【参考方案3】：

我不确定我们是否在同一页面上，但这是 if...else 声明的另一种方式：

  <div *ngIf = "tran.tranType == 'R'; else elsetag">
    Redeem
  </div>
  <ng-template #elsetag>
  <div>
    Earn
  </div>
  <ng-template>