web-dev-qa-db-fra.com

TypeError: Object (...) n'est pas une fonction

travaillant sur ionic3, angularfire2 v5

TypeError: Object (...) n'est pas une fonction à SwitchMapSubscriber.project ( http: // localhost: 8100/build/vendor.js: 73935: 76 ) sur SwitchMapSubscriber._next ( http: // localhost: 8100/build/vendor.js: 61778: 27 ) à l'adresse SwitchMapSubscriber.Subscriber.next ( http: // localhost: 8100/build/vendor.js: 20750: 18 ) at RefCountSubscriber.Subscriber._next ( http: // localhost: 8100/build/vendor.js: 20786: 26 ) at RefCountSubscriber.Subscriber.next ( http: // localhost: 8100/build/vendor.js: 20750: 18 ) sur Subject.next ( http: // localhost: 8100/build/vendor.js: 23237: 25 ) at ConnectableSubscriber.Subscriber._next ( http: // localhost: 8100/build/vendor.js: 20786: 26 ) at ConnectableSubscriber.Subscriber.next ( http: // localhost: 8100/build/vendor.js: 20750: 18 ) at Notification.observe ( http: // localhost: 8100/build/vendor.js: 51866: 50 ) sur AsyncAction.DelaySubscriber.dispatch ( http: // localhost: 8100/build/vendor.js: 76246: 40 )

home.ts

import { Component } from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
import { Observable } from "rxjs/Observable";
import { Item } from "../../models/item/item.model";
import {ShoppingListServices} from "../../services/shopping-list/shopping-list.services";



@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  shoppingList$: Observable<Item[]>;
  constructor(public navCtrl: NavController,  private shopping: ShoppingListServices) {
    this.shoppingList$=this.shopping
      .getShoppingList()
      .snapshotChanges()
      .map(
        changes => {
          return changes.map(c => ({
            key: c.payload.key, ...c.payload.val()
          }));
        }
      );
  }

}

home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Shoping List
    </ion-title>
    <ion-buttons end>
      <button navPush="AddShoppingItemPage" ion-button>
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Items
    </ion-list-header>
    <ion-item *ngFor="let item of shoppingList$ | async">
      {{ item.name }}
    </ion-item>
  </ion-list>
</ion-content>
ionic3angularfire2
10
Biswajit

Cela fonctionne pour moi, en utilisant "angularfire2": "^5.0.0-rc.11"

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

Pour récupérer les données:

this.db.list('/customers').valueChanges().subscribe((datas) => { 
  console.log("datas", datas)
},(err)=>{
   console.log("probleme : ", err)
});

Ou vous pouvez consulter le dépôt GitHub pour angularfire2 ici pour plus de détails

18
DevFest Douala Wilfried11

Les dernières versions de AngularFire nécessitent rxjs 6. Veuillez mettre à niveau rxjs. Vous devez inclure rxjs-compat si vos dépendances ne sont pas encore mises à niveau.

4
James Daniels

Même si vous pouvez exécuter rxjs-compat, ce n'est qu'une question de temps avant que vous deviez modifier votre code pour refléter le nouveau RXJS. Si vous utilisez Angular 6 et Angular 6 CLI, vous aurez RXJS 6, car Angular dépend de RXJS pour la plupart des choses. De plus, si vous prévoyez d'utiliser Angular Material 2, vous aurez besoin de Angular 6. Laissons donc simplement mettre à jour votre RXJS. Ce sera très important à partir de Ionic 4. Ionic 4 dépendra énormément de l'angle, car il inclura désormais les routes angulaires. 

Parmi les modifications les plus courantes de RXJS 6, citons:

import 'rxjs/add/observable/of';
// or 
import { of } from 'rxjs/observable/of';

Devient

import { of } from 'rxjs';

et 

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

devient

importer {map, prendre} à partir de 'rxjs/operators';

et

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

devient

import { Observable, Subject } from 'rxjs';

https://www.academind.com/learn/javascript/rxjs-6-what-changed/

3
Kevin Summersill

Bien que mon problème ne soit pas lié à angularfire, la recherche de TypeError: Object(…) is not a function amène les utilisateurs à cette question… .. Mon problème était que j'utilisais le plugin Youtube Video Player dans ionic v3. Mais comme les documents ionic v3 sont maintenant automatiquement redirigés vers des documents ioniques v4, j’utilisais la dernière version du plug-in.

installez simplement la version 4 du plug-in Youtube Video Player et vous êtes prêt à partir.

npm install --save @ionic-native/youtube-video-player@4

Ionic v3 docs

P.S: lorsque vous êtes automatiquement redirigé vers la documentation v4 d'ionic, insérez simplement la v3 dans l'URL.

0
Abhishek

Vous devez installer ceci:

npm i rxjs @ 6 rxjs-compat @ 6 promise-polyfill --save

Puis importez ces bibliothèques dans votre home.ts:

import {Observable} à partir de 'rxjs'; import 'rxjs/add/operator/map';

0
purav topiwala