Ionic 3 & Firebase CRUD - Displaying Shopping List Data (12)

Ionic 3 & Firebase CRUD

Learn Ionic 3 From Scratch

Master Ionic 3 with Ionic Native and Cordova Integrations

NativeScript with @ngrx:

You can also find me:

[vatsalyasinghi]

This is by far the best tutorial for ionic .. Amazing work Paul Thanks a lot !

[maryjanepender]

Paul I have been working through this whole series to help me get up to speed with Ionic for a project I have. Your careful step by step explanations of what to do and why we are doing it has helped me immensely . I have subscribed to your channel and click on like every time. Big help and many thanks. m.j.

[kishansital]

Cannot read property 'itemName' of undefined this is the error i get

[robertlow]

Hi, How can I store array into firebase, and retrieve it in future?

[abdulrahmanhelan]

Can you help me with this problem when I click the Add button after inserting the data? This message appears "this.shopingitemref$.push is not a function"

[reonaldusmaxmillian]

Hi Paul, thanks for the great tutorial vid.
I got this error :
Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

I think there's something wrong with the *ngFor="let item of shoppingListRef$ | async"
can you help me ?
thanks in advance.

[Dan-mceo]

I am always getting an error, angularfirelist is not assignable to type firebaselistobservables....please, someone should help me out. Mr. Paul please...

[AbhishekKumar-mmzh]

For those that get a function expected or Object error:
Before that you need to import the map operator:
import 'rxjs/add/operator/map'
Or more generally:
import 'rxjs/Rx';
And ready, app it’s working.
- via grokonez.com

[mohammedalanany]

import { FirebaseObjectObservable } from 'angularfire2/database';
error
not work

[believelody]

For those who got the Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe', try this:
In your ts file:
shoppingListRef: ]>;
shoppingList: ShoppingItem[ ];
constructor(private afDB: AngularFireDatabase) {
this.shoppingListRef =
=> {
this.shoppingList = x;
console.log(x)
});
}
In your html file:
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of shoppingList">
<p>Name: {{item.itemName}}</p>
</ion-item>
</ion-list>
</ion-content>

Remove the 'async' in your ngFor loop. It seems we can only read values from 'shopping-list' through the subscribe method. Let me know if it works for y'all!

[SiddharthRay]

Hi Paul,
Shopping List page takes couple of seconds to load when I open my page. what can I do to show a loader until the shopping list data arrived the ready to display? I want to implement a loader. what condition do I have to check whether the data arrived or not??

[Dan-mceo]

Thats when displaying the data from the database

[medamineelmonkad]

For those who have the pipe problem change this in the constructor to fix this issue :
this.shoppingListRef$ =

[vanfirebase]

i got error in async.. i get this error ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'