IonicとFirebase - InvalidPipeArgument：パイプ 'AsyncPipe'のための '[オブジェクトオブジェクト]'

Question

Ionic 3とFirebaseを使用して作業するための基本的なCRUD To-doリストアプリケーションを取得できません。

私が上で立ち往生していますエラーメッセージは次のとおりです。（約束で）

キャッチされない：エラー：InvalidPipeArgument： '[オブジェクトのオブジェクト]' のエラーメッセージが起動

パイプ 'AsyncPipe' のとき、Iショッピング-するlist.htmlに<ion-item *ngFor="let item of shoppingListRef$ | async">セクションを追加しました：

ショッピング-する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> 

上記のファイルで<ion-item>と</ion-item>の間のコードをコメントアウトしようとしましたが、エラーメッセージが取り除かれました。しかし、それを修正する方法を理解することはできません。

関連するファイルがいくつかあります。

ショッピング-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) 
    } 
} 

ショッピング-item.interface.tsあなたが持つかもしれないアイデア/助けを事前に

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

ありがとう！

Answer 1

は、私はあなたがやるべきこと、この場合には、バージョン5で新しいangularfire2バージョンを使用していると思う以下ません：database.listは、もはやあなたのように観察を返し

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

バージョン5から始めてasyncパイプを使用してテンプレートに登録することはできません。このため、Observableを返すvalueChanges()メソッドを連鎖する必要があります。

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>