我对Angular还是个新手，在学习使用RxJS从AFS获取数据的教程时被卡住了
我成功地抓取了所需的，并将其记录到控制台中，但当相同的数据传递到一个类属性中以在我的组件视图中使用时，一切都中断了。我已经在这2个小时，我已经尝试实施解决类似的问题，我发现在这里SO，但都失败了。

model.ts

export interface Expenses {
  title: string,
  type: boolean,
  amount: number
}

*ExpenselistService.ts

import { Expenses } from '../models/expenses';

loadItems() {
  return this.afs.collection('expdata').snapshotChanges().pipe(
    map(dump => {
        return dump.map(a => {
          const id = a.payload.doc.id;
          const data = a.payload.doc.data();
          return {id, data};
        })
      })
    );
  }

component.ts

expenseData: Array<object>; //Always produce an error (not initialized by constructor and returns an empty array if muted or initialized manually)

  constructor(private exService: ExpenselistService) { }

  ngOnInit(): void {
    this.exService.loadItems('expdata').subscribe(values => {
    this.expenseData = values; // Successfully stores to property but still unavailable in component.html
    });
  }

component.html

<tr *ngFor="let exp of expenseData; let i = index">
  <td>{{ i }}</td>
  <td>{{ exp.data.title }}</td>
  <td>{{ exp.data.type }}</td>
  <td>{{ exp.data.amount | currency }}</td>
  <td class="dropdown">
    <button class="dropdown-toggle" data-toggle="dropdown">Action</button>
    <div class="dropdown-menu dropdown-menu-right">
      <a href="#" class="dropdown-item">Edit</a>
      <a href="#" class="dropdown-item">Delete</a>
    </div>
  </td>
</tr>

这个想法是显示所有数据将所有数据从service.ts通过component.ts传输到component. html，但component.ts总是向component. html返回一个未定义的对象，component. html会显示一个错误，说明'exp'没有'data'属性。
任何帮助将不胜感激，因为我没有线索似乎是什么问题