Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe '


#1

what does this error mean ??
i can’t figure it out, i tried many things but nothing helped. this is my code if you need more code plz tell me.i am new to ionic2 and firebase .

Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' Error: 
InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError 
(http://localhost:8100/build/vendor.js:44334:12) at AsyncPipe._selectStrategy 
(http://localhost:8100/build/vendor.js:44479:15) at AsyncPipe._subscribe 
(http://localhost:8100/build/vendor.js:44465:31) at AsyncPipe.transform 
(http://localhost:8100/build/vendor.js:44443:22) at Object.eval [as updateDirectives]         
(ng:///AppModule/HomePage.ngfactory.js:136:73) at Object.debugUpdateDirectives [as 
updateDirectives] (http://localhost:8100/build/vendor.js:13450:21) at checkAndUpdateView 
(http://localhost:8100/build/vendor.js:12627:14) at callViewAction 
(http://localhost:8100/build/vendor.js:12995:21) at execComponentViewsAction 
(http://localhost:8100/build/vendor.js:12927:13) at checkAndUpdateView 
(http://localhost:8100/build/vendor.js:12633:5)

home.ts:

import { FirebaseProvider } from './../../providers/firebase/firebase';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseListObservable } from 'angularfire2/database';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
shoppingItems: FirebaseListObservable<any[]>;
newItem = ''; 
constructor(public navCtrl: NavController, public firebaseProvider: 
FirebaseProvider) {
this.shoppingItems = this.firebaseProvider.getShoppingItems();
}
addItem() {
this.firebaseProvider.addItem(this.newItem);
}
removeItem(id) {
this.firebaseProvider.removeItem(id);
}
}

firebase.ts:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 
'angularfire2/database';
@Injectable()
export class FirebaseProvider {
constructor(public afd: AngularFireDatabase) { }
getShoppingItems() {
return this.afd.list('/shoppingItems/');
}
addItem(name) {
this.afd.list('/shoppingItems/').push(name);
}
removeItem(id) {
this.afd.list('/shoppingItems/').remove(id);
}
}

html:

<ion-header>
<ion-navbar color="primary">
<ion-title>
  Shopping List
 </ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-row>
<ion-col col-9>
  <ion-item>
    <ion-input type="text" [(ngModel)]="newItem" placeholder="New Shopping item"></ion-input>
  </ion-item>
</ion-col>
<ion-col>
  <button ion-button (click)="addItem()">Add!</button>
</ion-col>
 </ion-row>
 <ion-list>
<ion-item-sliding *ngFor="let item of shoppingItems | async">
  <ion-item>
    {{ item.$value }}
  </ion-item>
  <ion-item-options side="right">
    <button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon 
name="trash"></ion-icon></button>
  </ion-item-options>
  </ion-item-sliding>
 </ion-list>
</ion-content>