web-dev-qa-db-fra.com

Angular: Error: Uncaught (in promise): TypeError: Object (...) is not a function

J'essayais d'intégrer google cloud firestore dans mon angular et cela a conduit à cette erreur

Erreur: non capturée (en promesse): TypeError: l'objet (...) n'est pas une fonction full error log

quand j'initie mon service chez le constructeur

voici le service que j'utilise:

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;
   }
}

et c'est ainsi que je l'initie dans mon composant

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

Je dois mentionner que mon application a plusieurs modules et j'ai défini le fournisseur pour le même service dans chacun d'eux et tous les composants renvoient la même erreur.

Une idée de ce qui pourrait provoquer cela?

angulargoogle-cloud-firestoreangular-services
5
Geeksan

Vous obtenez l'erreur car vous utilisez Rxjs 5.x.

Vous devez mettre à niveau Rxjs vers 6.0+. Suivez les documents. (C'est assez facile)

Dans rxjs 6.0, l'instruction d'importation a été modifiée & .map est également modifié en termes de structure.

Depuis rxjs 6.0, ils ont introduit un nouvel opérateur appelé .pipe où vous pouvez effectuer plusieurs opérations une par une.

Exemple:

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

Dans le cas où vous ne souhaitez pas mettre à niveau 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`

11
Ritwick Dey

Vous devez mettre à niveau votre rxjs vers la version 6.0+. Si vous êtes sur Angular 6, vous devrez également installer rxjs-compat. Exécutez simplement la commande ci-dessous pour résoudre les deux problèmes

npm install [email protected] rxjs-compat --save

9
Norman Pilusa