web-dev-qa-db-ja.com

TypeError：Object（...）は関数ではありません

ionic3、angularfire2 v5での作業

TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:73935:76)
    at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:61778:27)
    at 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)
    at 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)
    at 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
13
Biswajit

これは"angularfire2": "^5.0.0-rc.11"を使用して機能します

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

データを取得するには：

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

または、GitHubリポジトリでangularfire2を確認できます here 詳細

22
DevFest Douala Wilfried11

AngularFireの最近のリリースにはrxjs 6が必要です。rxjsをアップグレードしてください。まだアップグレードしていない依存関係がある場合は、rxjs-compatを含める必要があります。

4
James Daniels

Rxjs-compatを実行できますが、新しいRXJSを反映するようにコードを変更する必要があるのは時間の問題です。 Angular 6およびAngular 6 CLIを使用している場合、Angularはほとんどの点でRXJSに依存するため、RXJS 6が使用されます。また、Angular Material 2を使用する場合は、Angular 6が必要になります。したがって、RXJSを更新するだけです。これはIonic 4の時点で非常に重要になります。Ionic 4はangularルートを含むため、Angularに大きく依存します。

RXJS 6の最も一般的な変更のいくつかは次のとおりです。

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

になる

import { of } from 'rxjs';

そして

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

になる

import {map、take} from 'rxjs/operators';

そして

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

になる

import { Observable, Subject } from 'rxjs';

https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/

3
Kevin Summersill

これをインストールする必要があります：CLIで以下のコマンドラインを実行します

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

次に、これらのライブラリをhome.tsにインポートします。

import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
2
purav topiwala

ionic 3に新しいプラグインをインストールした後に取得する場合

次に、package.jsonファイルのstatusbarまたはsplashscreenプラグインのバージョンを確認します。

  "@ionic-native/splash-screen": "~4.17.0",
  "@ionic-native/status-bar": "~4.17.0",

インストールしたプラグインのバージョンを同じに変更して

npm update

このようになります

    "@ionic-native/camera": "^4.17.0",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",

それが誰かを助けることを願っています...... Android許可とカメラプラグインのために私のために働いた

また、importステートメントからngxを削除する必要があります

import { Camera, CameraOptions } from '@ionic-native/camera';
0
MSD

rxjs-etcライブラリを使用していますが、何らかの理由で競合が発生し、エラーTypeError: Object(…) is not a functionが発生するだけでなく、ChromeのCPUが完全に停止しました。

私が知る限り、それは最近のrxjsバージョンが非互換であることに関連しています-しかし、このライブラリを使用している場合、これが原因である可能性があります。

0
Simon_Weaver

私の問題はangularfireとは関係ありませんが、TypeError: Object(…) is not a functionを検索するとユーザーにこの質問が表示されます。私の問題は、ionic v3でYoutube Video Playerプラグインを使用していたことです。ただし、ionic v3ドキュメントはionic v4ドキュメントに自動的にリダイレクトされるため、プラグインの最新バージョンを使用していました。

Youtube Video Playerプラグインのバージョン4をインストールするだけで準備完了です。

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

Ionic v3ドキュメント

追伸：ionicのv4ドキュメントに自動リダイレクトされる場合は、URLにv3を挿入するだけです。

0
Abhishek

それは私に起こりました。たぶんあなたはあなたのプロジェクトで使用しているionic 3で、ionicバージョン4のプラグインをインストールしている場合、ionic 3を使用している場合、 https://ionicframework.com/docs/v3/ 。

0
Aehm Abourafeh