InvalidPipeArgument：管道“ AsyncPipe” / angularfire2的“ [对象对象]”

Question

每次尝试从Firebase读取数据时，都会收到此错误（InvalidPipeArgument：'[object Object]'for pipe'AsyncPipe'）。我正在关注一个教程，但是他使用的是旧版本的ObservableFireList angularfire2，我想使用AngularFireList

shopping-list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from '../../../node_modules/angularfire2/database';
import { ShoppingItem } from '../../models/shopping-item/shopping-item.interface';

@IonicPage()
@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html',
})
export class ShoppingListPage {

  shoppingListRef$: AngularFireList<ShoppingItem>;

  constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) {
    this.shoppingListRef$ = this.database.list('shopping-list')

  }

  navToAddShoppingPage(): void {
    this.navCtrl.push('AddShoppingPage')
  }



}

shopping-list.html

<ion-header>

  <ion-navbar color='primary'>
    <ion-title>Shopping List</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)='navToAddShoppingPage()'>
        <ion-icon name='add'></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let item of shoppingListRef$ | async">
      <h2>Item Name: {{ item.itemName }}</h2>
      <h3>Ammount: {{ item.itemNumber }}</h3>
    </ion-item>
  </ion-list>

</ion-content>