预期的 TypeError 函数：带有 Angular、TypeScript、Firebase 和 Ionic 的应用程序

Question

我研究了带有“TypeError Function expect”的错误，例如here 和here，但它们似乎与这个问题无关，我不知道如何解决它。我已经玩了 6 个多小时了。

有人可以帮我吗？

我是一个新手，正在使用 Angular、Firebase、Ionic 3 和 TypeScript 制作购物清单应用程序。它本质上应该将新项目添加到应用程序的显示屏幕/视图，即主页。

下面是接口代码：

export interface Item {
    key?: string;
    name: string;
    quantity: number;
    price: number;

}

下面是HomePage.ts的代码，这里导入了界面Item：

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

@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() // database list
  .snapshotChanges() // gets key and value
  .map(changes => { // for each change, get a new object
    return changes.map(c => ({
      key: c.payload.key,
      ...c.payload.val()
    }));
  });
  }

以下是应显示项目列表的 homepage.html：

<ion-item *ngFor="let item of shoppingList$ | async" >
    {{item.name}}
   </ion-item>

这是连接到 firebase 数据库的服务提供者代码 shopping-list.service.ts：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Item } from '../../models/item/item.model';

@Injectable()
export class ShoppingListService {
    private shoppingListRef= this.db.list<Item>('shopping-list');

    constructor (private db: AngularFireDatabase) { }
    getShoppingList(){
        return this.shoppingListRef;
    }
}

但我收到此错误：

TypeError: Function expected
   at Anonymous function (http://localhost:8100/build/vendor.js:74479:9)
   at SwitchMapSubscriber.prototype._next (http://localhost:8100/build/vendor.js:62604:13)
   at Subscriber.prototype.next (http://localhost:8100/build/vendor.js:20750:13)
   at Subscriber.prototype._next (http://localhost:8100/build/vendor.js:20786:9)
   at Subscriber.prototype.next (http://localhost:8100/build/vendor.js:20750:13)
   at Subject.prototype.next (http://localhost:8100/build/vendor.js:23237:17)
   at Subscriber.prototype._next (http://localhost:8100/build/vendor.js:20786:9)
   at Subscriber.prototype.next (http://localhost:8100/build/vendor.js:20750:13)
   at Notification.prototype.observe (http://localhost:8100/build/vendor.js:52062:17)
   at DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:76789:13)

Answer 1

试试这个：

首先，导入这个：

import {of} from "rxjs";

之后，替换这个：

 this.shoppingList$ = of(this.shopping
  .getShoppingList() // database list
  .snapshotChanges() // gets key and value
  .map(changes => { // for each change, get a new object
    return changes.map(c => ({
      key: c.payload.key,
      ...c.payload.val()
    }));
  }));

并重命名服务中的类型：

private shoppingListRef= this.db.list<Item[]>('shopping-list');