web-dev-qa-db-fra.com

comment écrire une instruction conditionnelle à l'intérieur ionic modèle html

Je porte mon application de jquery vers ionic. Dans jquery, j'écris du code javascript pour concaténer manuellement les balises html. Coller une partie de la même depuis le code jquery

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

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

Dans Ionic, j'essaie d'écrire le même code en utilisant ionic list Ci-dessous est mon modèle html

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

À côté de pointsEarned, j'ai besoin d'imprimer des points qui sont échangés ou gagnés de manière similaire au code jquery. Comment puis-je y parvenir?

angulartypescriptionic-frameworkionic2ionic3
7
Tanmay Patil

Une autre façon de gérer le modèle conditionnel consiste à utiliser * ngIf
si l'expression tran.tranType est 'R', alors le modèle en ligne est affiché .i.e Vous avez échangé (valeur de l'expression tran.pointsRedeemed) des points.

<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

Je ne sais pas exactement quelle est la question, mais vous pouvez écrire une déclaration conditionnelle comme ceci:

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

Il existe de nombreuses façons de le faire, mais je suppose que opérateur ternaire est le plus simple et le plus propre.

4
sebaferreras

Je ne sais pas si nous sommes sur la même page, mais c'est une autre façon pour if ... else statement:

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