Estoy portando mi aplicación de jquery a ionic framework. En jquery, estoy escribiendo código javascript para concatenar manualmente etiquetas html. Pegar una parte del mismo desde el código jquery
for ( count = start - 1; count < end ; count ++ ) { if (tranList[count].tranType == "R" ) tranType = "Redeem" ; else tranType = "Earn"; text += "<tr> <td>"+ tranType + "</td>" ;En Ionic, estoy tratando de escribir el mismo código usando la lista iónica A continuación se muestra mi plantilla html
<ion-list> <ion-item *ngFor="let tran of transactions"> <p> {{tran.pointsEarned}} </p> </ion-item> </ion-list>Junto a los puntos ganados, necesito imprimir los puntos que se canjean o se ganan de manera similar al código jquery. Cómo logro esto ?
Otra forma de manejar la plantilla condicional es usando *ngIf
si la expresión tran.tranType es 'R', entonces se muestra la plantilla en línea. Es decir, ha canjeado (valor de la expresión tran.pointsRedeemed) puntos.
<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>No estoy seguro de cuál es exactamente la pregunta, pero puede escribir una declaración condicional como esta:
<ion-list> <ion-item *ngFor="let tran of transactions"> <p> {{tran.pointsEarned}} {{ tran.tranType === 'R' ? 'Redeem' : 'Earn' }}</p> </ion-item> </ion-list>Hay muchas formas de hacerlo, pero supongo que el operador ternario es el más fácil y limpio.
No estoy seguro de si estamos en la misma página, pero esta es otra forma de hacer una declaración if...else :
<div *ngIf = "tran.tranType == 'R'; else elsetag"> Redeem </div> <ng-template #elsetag> <div> Earn </div> <ng-template>