首页 文章

TypeError:Object(...)不是函数

提问于
浏览
13

使用 ionic3,angularfire2 v5


TypeError:Object(...)不是函数
在 SwitchMapSubscriber.project(http://localhost:8100/build/vendor.js:73935:76)
在 SwitchMapSubscriber._next(http://localhost:8100/build/vendor.js:61778:27)
在 SwitchMapSubscriber.Subscriber.next(http://localhost:8100/build/vendor.js:20750:18)
在 RefCountSubscriber.Subscriber._next(http://localhost:8100/build/vendor.js:20786:26)
在 RefCountSubscriber.Subscriber.next(http://localhost:8100/build/vendor.js:20750:18)
在 Subject.next(http://localhost:8100/build/vendor.js:23237:25)
在 ConnectableSubscriber.Subscriber._next(http://localhost:8100/build/vendor.js:20786:26)
在 ConnectableSubscriber.Subscriber.next(http://localhost:8100/build/vendor.js:20750:18)
在 Notification.observe(http://localhost:8100/build/vendor.js:51866:50)
在 AsyncAction.DelaySubscriber.dispatch(http://localhost:8100/build/vendor.js:76246:40)

 
home.ts
 
```java
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>

11 回答

  • 22

    这适用于我,使用"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 这里以获取更多详细信息

  • 4

    最近发布的 AngularFire 需要 rxjs 6.请升级 rxjs,如果你有尚未升级的依赖项,你需要包含rxjs-compat

  • 3

    即使您可以运行 rxjs-compat,在您需要更改代码以反映新的 RXJS 之前,这只是时间问题。如果您使用的是 Angular 6 和 Angular 6 CLI,那么您将拥有 RXJS 6,因为 Angular 在大多数情况下依赖于 RXJS。此外,如果您打算使用 Angular Material 2,那么您将需要 Angular 6.所以我们只需更新您的 RXJS。这对于 Ionic 4 来说非常重要。离子 4 将在很大程度上取决于角度,因为它现在将包括 Angular Routes。

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

    从'rxjs/operators'导入{map,take};

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

    import { Observable, Subject } from 'rxjs';
    

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

  • 2

    您需要安装此命令:在 CLI 中运行以下命令行

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

    然后将这些库导入home.ts

    import { Observable } from 'rxjs';
    import 'rxjs/add/operator/map';
    
  • 0

    虽然我的问题与angularfire无关,但搜索TypeError: Object(…) is not a function会给用户带来这个问题。我的问题是我在离子 v3 中使用了Youtube Video Player插件。但由于离子 v3 文档现在自动重定向到离子 v4 文档,我使用的是最新版本的插件。

    只需安装Youtube Video Player插件的第 4 版,你就可以了。

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

    Ionic v3 文档

    P.S:当您自动重定向到 v4 docs of ionic 时,只需在 URL 中插入 v3 即可。

  • 0

    如果你在离子 3 中安装任何新的插件后得到

    然后只需检查 package.json 文件中状态栏或 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

    它发生在我身上,也许你正在使用你的项目离子 3,你安装离子版本 4 的插件,如果你使用离子 3,尝试从https://ionicframework.com/docs/v3/安装你的插件。

  • 0

    我正在使用rxjs-etc库,因为某些原因我遇到了冲突,不仅导致了错误TypeError: Object(…) is not a function而且还彻底扼杀了我在 Chrome 中的 CPU。

    我不确定为什么 - 它与最近的 rxjs 版本有关,据我所知 - 但如果你使用这个库,它可能是一个原因。

  • -1

    我改变了:

    "angularfire2" : "5.0.0-rc.8.0" and   "firebase": "^5.0.2",
    

    至 :

    "angularfire2" : "5.0.0-rc.6.0" and "firebase": "4.12.1"
    
  • -1

    CLI 中命令行以下 me:Run 的作用

    npm install angularfire2@5.0.0-rc.6 firebase@4.13.1
    

    npm install @firebase/app@^0.1.6
    
  • -4

    我有一个解决方案:

    只需卸载两个包 i.e angularfire2 和 firebase 即可

    typeError:Object(...)不是函数离子

相关问题