イオンHTMLテンプレートの中に条件文を書く方法

Question

私はjqueryからionicフレームワークへ私のアプリケーションを移植しています。 jqueryでは、htmlタグを手動で連結するためのjavascriptコードを書いています。イオンで jqueryのコードから同じの部分をペースト

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

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

、私はイオン性リストの下 を使用して同じコードを記述しようとしていますが、私のHTMLテンプレートpointsEarnedへ

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

次ですが、私は必要jQueryコードと同様に、印刷ポイントを償還または獲得します。どのように私はこれを達成するのですか？

Answer 1

私は正確に質問です何のわからないんだけど、あなたはこのような条件文を書くことができます。

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

あり、それを行うための方法がたくさんいるが、私はternary operatorであることを推測します最も簡単で清潔なものです。

Answer 2

条件テンプレートを処理する別の方法は、発現tran.tranTypeが「R」である場合は、（式の値tran.pointsRedeemed）償還た.i.e、次いでインラインテンプレートが示されている* ngIf
を使用することによるものである点。

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

私たちは同じページ上にあるかどうかわからないんだけど、これがあればための別の方法です...他声明：

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