angular - 预期的 TypeError 函数:带有 Angular、TypeScript、Firebase 和 Ionic 的应用程序
问题描述
我已经研究了出现“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)
解决方案
尝试这个:
首先,导入这个:
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');
推荐阅读
- docker - 无法从 Kubernetes 集群访问 rabbitmq 仪表板
- amazon-web-services - 如何在 AWS Glue 作业脚本中从 AWS RDS 获取数据并相应地转换数据并将其插入 aws rds?
- reactjs - 如何使用 docker 部署 React (NextJS) 项目?
- c - 每 0.01 秒打开/关闭一个文本文件是正确的选择吗?
- php - 在 codeigniter 视图中输入名称时如何带上大写字母?
- javascript - protobuf.js 如何为浏览器生成静态 es6 模块?
- marklogic - 是否可以为 marklogic 中的特定 xquery 端点跳过身份验证?
- ruby-on-rails - 用于抓取 Instagram 关注者的单元测试
- c# - ChangeLog OriginalValue 与 EF Core 更新实体上的 CurrentValue 相同
- mongodb - 使用 MongoDB 聚合获取组中的百分比