angular - hur man skriver ett villkorsuttryck inuti en Ionic HTML-mall

Jag migrerar min applikation från jQuery till Ionic-ramverket. I jQuery skriver jag JavaScript-kod för att manuellt sammanfoga HTML-taggar. Klistrar in en del av samma från jQuery-koden

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

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

I Ionic försöker jag skriva samma kod med Ionic-lista. Nedan är min HTML-mall

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

Bredvid pointsEarned behöver jag skriva ut om poäng är lösta eller tjänade på ett sätt som liknar jQuery-koden. Hur gör jag det?

Svar #1

Ett annat sätt att hantera villkorliga mallar är genom att använda *ngIf
om uttrycket tran.tranType är 'R', visas den in-line-mallen. Dvs. Du har löst in (värdet av uttrycket tran.pointsRedeemed) poäng.

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

Svar #2

Jag är inte säker på vad frågan exakt är, men du kan skriva ett villkorsuttryck så här:

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

Det finns många sätt att göra det på, men jag antar att ternära operatorn är den enklaste och renaste.

Relaterade artiklar