Ionic và Firebase - InvalidPipeArgument: '[object Object]' cho đường ống 'AsyncPipe'

Question

Tôi gặp sự cố khi tải ứng dụng danh sách công việc CRUD cơ bản sử dụng Ionic 3 và Firebase để hoạt động.

Thông báo lỗi Tôi đang mắc kẹt trên là:

của router (trong lời hứa): Lỗi: InvalidPipeArgument: '[đối tượng Object]' cho ống 'AsyncPipe'

Thông báo lỗi bắt đầu khi tôi thêm phần <ion-item *ngFor="let item of shoppingListRef$ | async"> để mua sắm-list.html:

mua sắm-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> 

Tôi đã thử nhận xét ra mã giữa <ion-item> và </ion-item> trong tệp ở trên và điều đó sẽ xóa thông báo lỗi. Tuy nhiên, không thể tìm ra cách khắc phục nó.

Dưới đây là một số tệp liên quan có liên quan.

mua sắm-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) 
    } 
} 

mua sắm-item.interface.ts

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

Cảm ơn trước cho bất kỳ ý tưởng/giúp bạn có thể có!

Answer 1

Tôi nghĩ rằng bạn đang sử dụng phiên bản angularfire2 mới đó là phiên bản 5 trong trường hợp này bạn nên làm như sau:

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

như bắt đầu từ phiên bản 5 database.list không còn trả về một thể quan sát được, do đó bạn không thể đăng ký nó trong mẫu bằng cách sử dụng đường ống async. đây là lý do tại sao bạn nên chuỗi các phương pháp valueChanges() trả về một quan sát được trong trường hợp này.

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>