Ionic i Firebase - InvalidPipeArgument: '[Object Object]' dla potoku 'AsyncPipe'

Question

Mam problem z pobraniem podstawowej listy rzeczy do zrobienia, używając Ionic 3 i Firebase do pracy.

Komunikat o błędzie siedzę na to:

Uncaught (obietnicy): Błąd: InvalidPipeArgument: '[object Object]' dla rury 'AsyncPipe'

Komunikat o błędzie zaczęło się, gdy dodano sekcję <ion-item *ngFor="let item of shoppingListRef$ | async"> na zakupy-list.html:

handlowo-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> 

Próbowałem komentować kod między <ion-item> i </ion-item> w powyższym pliku i to usuwa komunikat o błędzie. Jednak nie można dowiedzieć się, jak to naprawić.

Oto kilka istotnych plików zaangażowanych.

handlowo-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) 
    } 
} 

handlowo-item.interface.ts

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

Dzięki z góry za wszelkie pomysły/pomoc może być!

Answer 1

myślę używasz nowego angularfire2 wersję, która jest w wersji 5 w tym przypadku powinno być w następujący sposób:

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();; 
    } 
} 

jako począwszy od wersji 5 database.list nie zwraca już zauważalny więc nie można zasubskrybować go w szablonie za pomocą rury async. dlatego powinieneś połączyć metodę valueChanges(), która zwraca Observable w tym przypadku.

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>