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

时间:2017-04-09 17:49:49

标签: angular typescript ionic-framework ionic2 ionic3

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

#include<stdio.h>
#include<stdlib.h>


int main(void){
    char query[10] = "Horse";
    switch(str_switch(query, 3, "Bird", "Dog", "Horse")) {
        case 0: // Bird
            printf("It\'s a bird\n");
            break;
        case 1: // Dog
            printf("It\'s a dog\n");
            break;
        case 3: // Horse
            printf("It\'s a horse\n");
            break;
        case -1: // Error
            printf("It\'s an error :(\n");
            break;
        default: // ?
            printf("It\'s nothing..?\n");
            break;
    }
    system("pause");
    return 0;
}

在Ionic中,我试图使用离子列表编写相同的代码 下面是我的html模板

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

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

在pointsEarned旁边,我需要打印兑换或获得类似于jquery代码的积分。我如何实现这一目标?

3 个答案:

答案 0 :(得分:13)

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

答案 1 :(得分:4)

我不确定究竟是什么问题,但你可以写一个像这样的条件语句:

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

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

答案 2 :(得分:3)

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

func messageComposeViewController(_ controller: MFMessageComposeViewController, didFinishWith result: MessageComposeResult) {
        controller.dismiss(animated: true, completion: nil)
}