Angular:错误:未捕获(承诺):TypeError:Object(...)不是函数
Posted
技术标签:
【中文标题】Angular:错误:未捕获(承诺):TypeError:Object(...)不是函数【英文标题】:Angular : Error: Uncaught (in promise): TypeError: Object(...) is not a function 【发布时间】:2018-11-05 01:50:16 【问题描述】:我试图将 google cloud firestore 集成到我的 Angular 应用程序中,结果导致该错误
Error: Uncaught (in promise): TypeError: Object(...) is not a function
当我在构造函数中启动我的服务时
这是我正在使用的服务:
import Injectable from '@angular/core';
import AngularFirestore, AngularFirestoreCollection,
AngularFirestoreDocument from 'angularfire2/firestore';
import Idata from '../model';
import Observable from 'rxjs/Observable';
@Injectable()
export class DataService
// collections initialisation
datas: Observable<Idata[]>;
dataCollection: AngularFirestoreCollection<Idata>;
dataDocumment: AngularFirestoreDocument<Idata>;
data: Observable<Idata>;
constructor(public afs: AngularFirestore)
// get all documents for caucus
getDataCaucus()
this.dataCollection = this.afs.collection('eluCC');
this.datas = this.afs.collection('eluCC').snapshotChanges().map(changes =>
return changes.map(a =>
const data = a.payload.doc.data() as Idata;
data.id = a.payload.doc.id;
return data;
);
);
return this.datas;
这就是我在组件中启动它的方式
import Component, OnInit, AfterViewInit from '@angular/core';
import DataService from '../../services/data.service';
import Observable from 'rxjs/Observable';
import AngularFirestore from 'angularfire2/firestore';
declare interface DataTable
headerRow: string[];
footerRow: string[];
dataRows: string[][];
declare var $:any;
@Component(
selector: 'app-grid-cmp',
templateUrl: 'grid.component.html'
)
export class GridSystemComponent
temp = [];
rows = [];
public dataTable: DataTable;
constructor(private afs: AngularFirestore,private dataService: DataService)
this.dataService.getDataCaucus().subscribe((datas) =>
this.temp = [...datas];
this.rows = datas;
console.log(datas);
);
ngOnInit()
this.dataTable =
headerRow: [ 'Name', 'Position', 'Office', 'Age', 'Date', 'Actions' ],
footerRow: [ 'Name', 'Position', 'Office', 'Age', 'Start Date', 'Actions' ],
dataRows: [
['Airi Satou', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
['Angelica Ramos', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
['Ashton Cox', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
['Bradley Greer', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Brenden Wagner', 'Paul Dickens', 'Communication', '2015', '69,201', ''],
['Brielle Williamson', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Caesar Vance', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Cedric Kelly', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Charde Marshall', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Colleen Hurst', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Dai Rios', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
['Doris Wilder', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
['Fiona Green', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
['Garrett Winters', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Gavin Cortez', 'Paul Dickens', 'Communication', '2015', '69,201', ''],
['Gavin Joyce', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Gloria Little', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Haley Kennedy', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Herrod Chandler', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Hope Fuentes', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Howard Hatfield', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
['Jena Gaines', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
['Jenette Caldwell', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
['Jennifer Chang', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Martena Mccray', 'Paul Dickens', 'Communication', '2015', '69,201', ''],
['Michael Silva', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Michelle House', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
['Paul Byrd', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round']
]
;
ngAfterViewInit()
$('#datatables').DataTable(
'pagingType': 'full_numbers',
'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']],
responsive: true,
language:
search: '_INPUT_',
searchPlaceholder: 'Search records',
);
const table = $('#datatables').DataTable();
// Edit record
table.on( 'click', '.edit', function ()
const $tr = $(this).closest('tr');
const data = table.row($tr).data();
alert( 'You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.' );
);
// Delete a record
table.on( 'click', '.remove', function (e: any)
const $tr = $(this).closest('tr');
table.row($tr).remove().draw();
e.preventDefault();
);
// Like record
table.on( 'click', '.like', function ()
alert('You clicked on Like button');
);
我不得不提一下,我的应用程序有几个模块,并且我在每个模块中都设置了相同服务的提供程序,并且所有组件都返回相同的错误。
知道什么可能导致这种情况吗?
【问题讨论】:
你能补充更多细节吗?哪一行抛出此错误?在执行您的应用之前,您不需要等待某些 Google 服务加载完毕吗? 问题不是从任何行抛出错误,我将使用完整的错误消息更新问题。不,我不需要等待任何谷歌服务 您是否按照说明正确安装了 Firestore 插件? github.com/angular/angularfire2/blob/master/docs/… 是的,我做了,我仔细检查了它 【参考方案1】:您收到错误是因为您使用的是 Rxjs 5.x。
您必须将 Rxjs 升级到 6.0+。 Follow the docs.(很简单)
在 rxjs 6.0 中,import 语句已更改,.map
在结构方面也发生了更改。
从 rxjs 6.0 开始,他们引入了一个名为 .pipe
的新运算符,您可以在其中一个一个地执行多个操作。
例子:
import Observable from 'rxjs';
import map from 'rxjs/operators';
this.datas = this.afs.collection('eluCC').snapshotChanges()
.pipe(
map(changes =>
return changes.map(a =>
const data = a.payload.doc.data() as Idata;
data.id = a.payload.doc.id;
return data;
)
)
);
如果你不想升级 Rxj(I don't why - it is pretty easy really), downgrade to angularfire2 5.0.0-rc.6 version **(not recommended)**.
npm i -s angularfire2@5.0.0-rc.6`
【讨论】:
angularfire2
、angular
和rxjs
使用的是哪个版本? @Geeksan
我正在使用 angular 5.2.0,“rxjs”:“5.5.6”和“angularfire2”:“^5.0.0-rc.10”,
操作!我刚刚发现,你必须使用rxjs 6.0
。将 rxjs 升级到 6.0。这是文档github.com/ReactiveX/rxjs/blob/master/MIGRATION.md
如果你不想升级 Rxjs(我不知道为什么 - 这很容易),回到 angularfire2 5.0.0-rc.6
版本(不推荐)。 npm i -s angularfire2@5.0.0-rc.6
这行得通,先生,我更新了 rxjs,现在一切正常。谢谢你。我建议您编辑您的答案,以便我可以将其标记为已回答【参考方案2】:
您需要将您的 rxjs 升级到 6.0+ 版本。如果您使用的是 Angular 6,您还需要安装 rxjs-compat。只需运行以下命令即可解决这两个问题
npm install rxjs@6.0 rxjs-compat --save
【讨论】:
以上是关于Angular:错误:未捕获(承诺):TypeError:Object(...)不是函数的主要内容,如果未能解决你的问题,请参考以下文章
Angular2“没有 t 的提供者!”和未捕获(承诺):错误:DI 错误
Angular + Jest:错误:未捕获(承诺):无法加载 C:footer.component.html
ERROR 错误:未捕获(承诺中):TypeError:i.BehaviorSubject 不是 Angular 10 s-s-r 中的构造函数
未捕获(承诺):错误:没有 AngularFireAuth 的提供者