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

Question

我正在将我的应用程序从jquery移植到离子框架.在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中,我试图使用离子列表编写相同的代码.下面是我的html模板

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

在PointsEarned旁边,我需要打印点数被兑换或获得类似于jquery代码.我如何实现这一目标？

Answer 1

处理条件模板的另一种方法是使用*ngIf,
如果表达式tran.tranType是'R',则显示内联模板.ie你已经兑换(表达式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>

Answer 2

我不确定确切的问题是什么，但是您可以编写如下条件语句：

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

有很多方法可以做到这一点，但我想三元运算符是最简单，最干净的一种。

Answer 3

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

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