Ionic 3 firebase display data error - firebase

Question

Currently I am able to post data to the firebase, but I can't get the data and display it in my ionic 3 app. This is my shoes.ts file:
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from "angularfire2/database";
import { FirebaseListObservable } from 'angularfire2/database';
#Component({
selector: 'page-shoes',
templateUrl: 'shoes.html',
})
export class ShoesPage {
shoppingItems: FirebaseListObservable<any[]>;
newItem = '';
getShoppingItems() {
return this.afDB.list('/shoppingItems/');
}
constructor(public navCtrl: NavController, public navParams: NavParams,
public afDB: AngularFireDatabase){
this.addItem("awesomeStuff");
this.getShoppingItems();
alert(this.shoppingItems);
}
ionViewDidLoad() {
console.log('ionViewDidLoad ShoesPage');
}
addItem(name) {
this.afDB.list('/shoppingItems/').push(name);
}
removeItem(id) {
this.afDB.list('/shoppingItems/').remove(id);
}
}
This is a part of my the shoes.html file:
<ion-list>
<ion-item class="text" *ngFor="let item of shoppingItems | async">
{{item.$value}}
</ion-item>
</ion-list>
Any ideas how I can be able to display the firebase data? Currently I am getting: [object Object] when I alert the shoppingList.