预计 TypeError 函数:具有 Angular、TypeScript、Firebase 和 Ionic 的应用程序

Question

我已经研究了出现"TypeError Function expect"的错误，例如这里和这里，但它们似乎与这个问题无关，我不知道如何解决它。我已经在它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()
    }));
  });
  }

以下是主页.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');