Angular 使用ngFor“遍历数组”；“未定义标识符”；

使用ngFor迭代数组时，我得到错误：

未定义标识符“expenseitem”。组件声明、模板变量声明和元素引用不包含此类成员

标识符在导入的model.ts文件中定义。 我可能做错了什么

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

expenseitem.model.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;
  }

}

export class Expenseitem {

    constructor(public id: string, public timestamp: number, public amount: number, public imageUrl: string
        ) { }
}

---

我已经解决了我的错误

我在关闭

标记时犯了一个愚蠢的错误：

<ion-item *ngFor="let expenseitem of loadedExpenses"></ion-item>
        <ion-thumbnail slot="start">
          <ion-img [src]="expenseitem.imageUrl"></ion-img>

当然，您必须在您所在的标记中进行迭代，否则它将不起作用。因此，通过移动

来包含我的迭代，它现在可以工作了

<ion-item *ngFor="let expenseitem of loadedExpenses">
        <ion-thumbnail slot="start">
          <ion-img [src]="expenseitem.imageUrl"></ion-img></ion-item>

---

感谢您的回复和对浪费时间的道歉

您是否尝试记录this.expensedataService.expenseitems还给你。尝试这样的

console.log（this.expensedataService.expenseitems）因为你可能没有数据。如果this.expensedataService.expenseitems返回承诺或类似内容，ngFor将无法工作。你能展示一下你服务中的功能吗？