私は自分のアプリケーションをjqueryからionic frameworkに移植しているところです。 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>" ;
Ionicでは、ionic listを使って同じコードを書こうとしています。 以下は私のhtmlテンプレートです。
<ion-list>
<ion-item *ngFor="let tran of transactions">
<p> {{tran.pointsEarned}} </p>
</ion-item>
</ion-list>
pointsEarnedの隣に、私はポイントが償還されるか、またはjqueryコードと同様に獲得されたことを表示する必要があります。どのように私はこれを実現するには?
条件付きテンプレートを扱うもう一つの方法は、*ngIfを使うことです。
tran.tranTypeが 'R' である場合、インラインテンプレートが表示されます。
<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>