Angular：Error：Uncaught（in promise）：TypeError：Object（...）is a function not
Google Cloud Firestoreをangularアプリに統合しようとしていましたが、このエラーが発生しました
エラー：キャッチされません（約束）：TypeError：Object（...）は関数ではありません
コンストラクターにサービスを開始するとき
これは私が使用しているサービス：
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');
});
}
}
私のアプリにはいくつかのモジュールがあり、それぞれに同じサービスのプロバイダーを設定しており、すべてのコンポーネントが同じ間違いを返すことを言及する必要があります。
何がこれを引き起こす可能性があるのか？
Rxjsをバージョン6.0以降にアップグレードする必要があります。 Angular 6を使用している場合、rxjs-compatをインストールする必要があります。両方の問題を解決するには、以下のコマンドを実行してください。
npm install [email protected] rxjs-compat --save