While using ngFor to iterate through an array, I encountered the following error message:
"Identifier 'expenseitem' is not defined. The component declaration, template variable declarations, and element references do not contain such a member"
I have verified that the identifier is indeed defined in the imported model.ts file. What could be causing this issue?
receipts.page.html
<ion-header>
<ion-toolbar>
<ion-title>Expenses Total: {{ totalExpenses | currency:'GBP'}}</ion-title>
<ion-buttons slot="primary">
<ion-button routerLink="/addform">
<ion-icon name="add" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12" size-sm="8" offset-sm="2" text-center>
<ion-card>
<ion-card-header>
<ion-card-title>
{{ loadedExpenses[0].timestamp }}
</ion-card-title>
</ion-card-header>
<ion-img [src]="loadedExpenses[0].imageUrl"></ion-img>
<ion-card-content>
<p>{{ loadedExpenses[0].amount | currency:'GBP' }}</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" size-sm="8" offset-sm="2" text-center>
<ion-list>
<ion-item *ngFor="let expenseitem of loadedExpenses"></ion-item>
<ion-thumbnail slot="start">
<ion-img [src]="expenseitem.imageUrl"></ion-img>
</ion-thumbnail>
<ion-label>
<h2>{{ expenseitem.timestamp }}</h2>
<p>{{ expenseitem.amount }}</p>
</ion-label>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
receipts.page.ts
import { Component, OnInit } from '@angular/core';
import { ExpensedataService } from '../expensedata.service'
import { Expenseitem } from '../expenseitem.model';
@Component({
selector: 'app-receipts',
templateUrl: './receipts.page.html',
styleUrls: ['./receipts.page.scss'],
})
export class ReceiptsPage implements OnInit {
loadedExpenses: Expenseitem[];
constructor(private expensedataService: ExpensedataService) { }
ngOnInit() {
this.loadedExpenses = this.expensedataService.expenseitems;
}
}
expenseitem.model.ts
export class Expenseitem {
constructor(public id: string, public timestamp: number, public amount: number, public imageUrl: string
) { }
}