İyonik ve Firebase - InvalidPipeArgument: 'AsyncPipe' borusu için '[object Object]'

Question

Çalışmak için Ionic 3 ve Firebase kullanarak temel bir CRUD yapılacaklar listesi uygulaması alma sorunu yaşıyorum.

ben şaşırıp hata iletisi: (sözden)

Yakalanmayan: Hata: InvalidPipeArgument: '[object Object]' hata mesajı çıkıyor

boru 'AsyncPipe' için ne zaman alışveriş list.html için <ion-item *ngFor="let item of shoppingListRef$ | async"> bölüm eklendi:

alışveriş-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> 

Yukarıdaki dosyada <ion-item> ve </ion-item> arasındaki kodu yorumlamayı denedim ve bu hata iletisini kaldırır. Ancak, nasıl düzeltileceğini anlayamıyorum.

İlgili bazı dosyalar burada verilmiştir.

alışveriş-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) 
    } 
} 

alışveriş-item.interface.ts

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

/olabilecek yardımcı herhangi fikirler için şimdiden

teşekkürler!

Answer 1

Ben size yapıyor olması gerektiğini, bu durumda sürüm 5 yeni angularfire2 sürümü kullanıyorsanız düşünüyorum şu: database.list artık size öylesine bir gözlemlenebilir döndürür

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

sürüm 5 başlayarak olarak async borusunu kullanarak şablona abone olamaz. Bu nedenle, bu durumda Gözlemlenebilir'i döndüren valueChanges() yöntemini zincirlemeniz gerekir.

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>