离子3、Firebase和angularfire2出错

我收到以下错误消息：

ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

当我试图列出firebase数据库中的数据时，我不知道为什么。查看我的代码、我的相关部门：

"@ionic-native/core": "~4.9.2",
...
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from './../../models/item/item.model';

@Injectable()
export class ShoppingListService {

  private shoppingListRef;
  constructor(private db: AngularFireDatabase) {
    this.shoppingListRef = this.db.list<Item>('shopping-list');
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .subscribe(changes => {
      return changes.map(change => {
        let retorno = {
          key: change.payload.key,
          ...change.payload.val()
        };
        return retorno;
      });
    });
  }
...

<ion-item *ngFor="let item of shoppingList$ | async">
   {{item.name}}
</ion-item>

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .valueChanges();
  }
...

我的服务：

"@ionic-native/core": "~4.9.2",
...
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from './../../models/item/item.model';

@Injectable()
export class ShoppingListService {

  private shoppingListRef;
  constructor(private db: AngularFireDatabase) {
    this.shoppingListRef = this.db.list<Item>('shopping-list');
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .subscribe(changes => {
      return changes.map(change => {
        let retorno = {
          key: change.payload.key,
          ...change.payload.val()
        };
        return retorno;
      });
    });
  }
...

<ion-item *ngFor="let item of shoppingList$ | async">
   {{item.name}}
</ion-item>

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .valueChanges();
  }
...

从'@angular/core'导入{Injectable}；
从“angularfire2/database”导入{AngularFireDatabase}；
从“/../models/Item/Item.model”导入{Item}；
@可注射（）
出口类购物列表服务{
私人购物清单参考；
构造函数（专用数据库：AngularFireDatabase）{
this.shoppingListRef=this.db.list（'shopping-list'）；
}
getShoppingList（）{
返回此.shoppingListRef；
}
}

我的组件：

"@ionic-native/core": "~4.9.2",
...
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from './../../models/item/item.model';

@Injectable()
export class ShoppingListService {

  private shoppingListRef;
  constructor(private db: AngularFireDatabase) {
    this.shoppingListRef = this.db.list<Item>('shopping-list');
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .subscribe(changes => {
      return changes.map(change => {
        let retorno = {
          key: change.payload.key,
          ...change.payload.val()
        };
        return retorno;
      });
    });
  }
...

<ion-item *ngFor="let item of shoppingList$ | async">
   {{item.name}}
</ion-item>

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .valueChanges();
  }
...

。。。
导出类主页实现OnInit{
shoppingList$：可观察
建造师(
公共navCtrl:NavController，
私人购物：ShoppingListService
) {}
恩戈尼尼特（）{
this.shoppingList$=this.shopping
.getShoppingList（）
.snapshotChanges（）
.订阅（更改=>{
返回changes.map（change=>{
让我们来看看，否={
key:change.payload.key，
…change.payload.val（）
};
返回号；
});
});
}
...

最后是我的模板：

"@ionic-native/core": "~4.9.2",
...
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from './../../models/item/item.model';

@Injectable()
export class ShoppingListService {

  private shoppingListRef;
  constructor(private db: AngularFireDatabase) {
    this.shoppingListRef = this.db.list<Item>('shopping-list');
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .subscribe(changes => {
      return changes.map(change => {
        let retorno = {
          key: change.payload.key,
          ...change.payload.val()
        };
        return retorno;
      });
    });
  }
...

<ion-item *ngFor="let item of shoppingList$ | async">
   {{item.name}}
</ion-item>

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .valueChanges();
  }
...

{{item.name}

如果我删除

async

管道，我会遇到同样的错误。我曾经尝试过这个问题，但没有成功：

---

知道我做错了什么吗？提前谢谢。

这是从angularfire2检索数据的旧方法，现在我只使用以下方法：

在我的组件中：

"@ionic-native/core": "~4.9.2",
...
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from './../../models/item/item.model';

@Injectable()
export class ShoppingListService {

  private shoppingListRef;
  constructor(private db: AngularFireDatabase) {
    this.shoppingListRef = this.db.list<Item>('shopping-list');
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .subscribe(changes => {
      return changes.map(change => {
        let retorno = {
          key: change.payload.key,
          ...change.payload.val()
        };
        return retorno;
      });
    });
  }
...

<ion-item *ngFor="let item of shoppingList$ | async">
   {{item.name}}
</ion-item>

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .valueChanges();
  }
...

。。。
导出类主页实现OnInit{
shoppingList$：可观察
建造师(
公共navCtrl:NavController，
私人购物：ShoppingListService
) {}
恩戈尼尼特（）{
this.shoppingList$=this.shopping
.getShoppingList（）
.valueChanges（）；
}
...

一切都很好