html - 运行时错误 = 对象不是函数

Question

我正在使用 Ionic 开发我的第一个应用程序，并希望在 home.html 中显示 firebase 数据，但是当我启动服务时，在浏览器中显示此消息：

object(...) is not a function

我在 home.ts 创建了这段代码：

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular'; 
import { ShoppingListService } from '../../services/shopping-list/shopping-list.service';
import { AjaxObservable } from 'rxjs/observable/dom/AjaxObservable';
import { Observable } from 'rxjs/Observable';
import { Item } from '../../models/item/item.model';

@IonicPage()
@Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage { 

  shoppingList$ : Observable <Item[]>;

  constructor(public navCtrl: NavController, private shopping:ShoppingListService) {
this.shoppingList$ = this.shopping
.getShoppingList() //pega a lista do banco de dados
.snapshotChanges() //chave e valor das infos do bd
.map(changes => {
    return changes.map(c => ({
      key: c.payload.key, 
      ...c.payload.val(),
    }));
  });
}



}

在此之后，我创建了 home.html：

<ion-content padding>
  <ion-list>
    <ion-list-header>
  Items
</ion-list-header>
<ion-item *ngFor="let item of shoppingList$ | async">
  {{item.nomecontratante}}

</ion-item>
</ion-list>

</ion-content>

谢谢你帮助我！

标签： htmltypescriptionic2ionic3