web-dev-qa-db-ja.com

ionic htmlテンプレート内に条件文を記述する方法

アプリケーションをjqueryからionicフレームワークに移植しています。jqueryでは、手動でhtmlタグを連結するJavaScriptコードを作成しています。

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

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

Ionic、ionicリストを使用して同じコードを記述しようとしています

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

PointsEarnedの次に、ポイントを印刷する必要があります。どうすればこれを達成できますか？

angulartypescriptionic-frameworkionic2ionic3
7
Tanmay Patil

条件付きテンプレートを処理する別の方法は、* 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>
14
Tanmay Patil

正確に何が問題なのかわかりませんが、次のような条件付きステートメントを書くことができます。

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

多くの方法がありますが、 三項演算子 が最も簡単でクリーンな方法だと思います。

4
sebaferreras

同じページにいるかどうかはわかりませんが、これはif ... elseステートメントの別の方法です。

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