Currently, I am in the process of developing a mobile application with the Ionic framework. One of the key functionalities of this app involves making an API call to retrieve transaction data, which then needs to be displayed in the HTML template:
The data returned by the API looks something like this:
[
{
amount1:"100",
buyer_email:null,
buyer_name:"test",
confirms_needed:2,
created_at:"2018-07-09 07:56:33",
id:8,
invoice:null,
currency1: "USD"
},
{
amount1:"100",
buyer_email:null,
buyer_name:"test",
confirms_needed:2,
created_at:"2018-07-10 04:36:33",
id:6,
invoice:null,
currency1: "USD"
}
]
Here is the TypeScript code responsible for making the API call:
ionViewDidLoad() {
this.transactionProvider.getTransactions()
.subscribe((data:any)=>{
this.transactions = data;
console.log(this.transactions);
},error=>{
console.log(error);
});
}
To initialize the transactions, I simply declare 'transactions' under the export class.
This is how I loop through the transaction data in my code:
<div class="width-100p fl-left box-shadow border-radius-10 padd-tp-bt-10 mg-tp-20" *ngFor="let transaction of transactions">
<div (click)="saveTransactionClick(transaction)">
<img width="20" src="assets/imgs/currencies/icons/{{transaction.currency1}}.png">
<div class="fl-left mg-l-10">
<div class="f-size-12 width-100p fl-left">{{transaction.currency1}} text: {{transaction.id}} :tet</div>
<div class="f-size-10 width-100p fl-left gray">{{transaction.created_at | date: 'yyyy-MM-dd'}}</div>
<div class="f-size-10 width-100p fl-left gray">{{transaction.created_at | date: 'hh:mm:ss'}}</div>
</div>
</div>
</div>
However, I am facing an issue where when I console.log(this.transactions), the ID is showing up as undefined, even though the other data (amount, buyer_name, etc.) is correct.
If I remove the ngFor loop from the HTML, the IDs return to normal.
I'm puzzled as to why this is happening and I'm unsure how to resolve it. Any insights would be greatly appreciated. Thank you.
Update
The issue was caused by incorrect usage of ngIf
I discovered that I had mistakenly used ngIf incorrectly in my HTML code. I had written
*ngIf="transaction.id = clickedTransactionId"*ngIf="transaction.id == clickedTransactionId"Thank you for your assistance.