Ionic et Firebase - InvalidPipeArgument: '[object Object]' pour le tuyau 'AsyncPipe'

Question

Je n'arrive pas à obtenir une application de base de liste de tâches CRUD en utilisant Ionic 3 et Firebase pour fonctionner.

Le message d'erreur que je suis coincé sur est:

Uncaught (en promesse): Erreur: InvalidPipeArgument: '[objet Object]' pour pipe 'AsyncPipe'

Le message d'erreur a commencé quand je ajouté la section <ion-item *ngFor="let item of shoppingListRef$ | async"> au-list.html:

shopping-list.html

<ion-header> 
    <ion-navbar color="primary"> 
    <ion-title>Shopping List</ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="navigateToAddShoppingPage()"> 
     <ion-icon name="add"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <ion-list> 
    <ion-item *ngFor="let item of shoppingListRef$ | async"> 
     <h2>Item Name: {{item.itemName}}</h2> 
     <h3>Amount: {{item.itemNumber}}</h3> 
    </ion-item> 
    </ion-list> 
</ion-content> 

J'ai essayé de commenter le code entre <ion-item> et </ion-item> dans le fichier ci-dessus, et cela supprime le message d'erreur. Cependant, ne peut pas comprendre comment résoudre ce problème.

Voici quelques fichiers pertinents impliqués.

shopping-list.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 

import { AddShoppingPage } from '../add-shopping/add-shopping'; 
import { ShoppingItem } from '../../models/shopping-item/shopping-item.interface'; 

@Component({ 
    selector: 'page-shopping-list', 
    templateUrl: 'shopping-list.html', 
}) 
export class ShoppingListPage { 

    shoppingListRef$: FirebaseListObservable<ShoppingItem[]> 

    constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) { 
    this.shoppingListRef$ = this.database.list('shopping-list'); 
    } 

    navigateToAddShoppingPage() { 
    this.navCtrl.push(AddShoppingPage) 
    } 
} 

shopping-item.interface.ts

export interface ShoppingItem { 
    itemName: string; 
    itemNumber: number; 
} 

Merci à l'avance pour toutes les idées/aide que vous pourriez avoir!

Answer 1

Je pense que vous utilisez la nouvelle version angularfire2 qui est la version 5 dans ce cas, vous devez faire ce qui suit:

import { Component } from '@angular/core'; 
import { AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 

@Component({ 
    selector: 'page-shopping-list', 
    templateUrl: 'shopping-list.html', 
}) 
export class ShoppingListPage { 
shoppingListRef$: Observable<any[]>; 
    constructor(database: AngularFireDatabase) { 
    this.shoppingListRef$ = this.database.list('shopping-list').valueChanges();; 
    } 
} 

comme à partir de la version 5 database.list ne renvoie plus observable que vous ne peut pas s'y abonner dans le modèle en utilisant le tube async. C'est pourquoi vous devriez enchaîner la méthode valueChanges() qui renvoie un Observable dans ce cas.

Answer 2

<ion-list *ngIf="shoppingListRef$ | async; let shoppingListRef"> 
    <ion-item *ngFor="let item of shoppingListRef"> 
     <h2>Item Name: {{item.itemName}}</h2> 
     <h3>Amount: {{item.itemNumber}}</h3> 
    </ion-item> 
    </ion-list>