Ожидается функция TypeError: приложение с Angular, TypeScript, Firebase и Ionic

Question

Я исследовал ошибки, которые приводят к «Ожиданию функции TypeError», например здесь и здесь , но они, похоже, не относятся к этой проблеме, и я могу ' не могу понять, как это решить. Я был в этом в течение 6 + часов.

Пожалуйста, кто-нибудь может мне помочь?

Я новичок и создаю приложение для списка покупок, используя Angular, Firebase, Ionic 3 и TypeScript. По сути, он должен добавлять новые элементы на экран / вид приложения, т. Е. HomePage.

Ниже приведен код интерфейса:

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

}

Ниже приведен код для HomePage.ts, куда импортируется элемент интерфейса:

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>

Это код поставщика услуг shopping-list.service.ts, который подключается к базе данных firebase:

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');