CODEWITHSUNDEEP
angularfirebaseionic-frameworkionic3angularfire2
ugrdursun
ugrdursun

Reputation: 369

Cannot list items with *ngFor

i want to make a simple adding friend and friend requests page for my app. i am using angularjs , angularfire2 and ionic 3.

    <ion-list>

  <ion-item *ngFor="let friendrequest of friendRequestArray; let i = index">
    <h2>{{friendrequest.$value}}</h2>

    <button ion-button  item-end>Accept</button>
    <button ion-button  item-end>Decline</button>
  </ion-item>

</ion-list>

my ts code:

constructor(public navCtrl: NavController, public navParams: NavParams,
public alertCtrl: AlertController, private afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth) {

  this.myUid = this.afAuth.auth.currentUser.uid;

  this.afDatabase.list(`users/${this.myUid}/friendrequests/`).subscribe(data => {

    this.friendRequestArray = data;
    console.log(this.friendRequestArray);
  });

}

i am getting a console output like this:

so its working

error is:

   ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

my data:

 "users" : {
"3YG0aYta1AP28COa7hdopwvICt63" : {
  "friendrequests" : {
    "test2" : "7LXXTyAH9MeKyqRBg3oP7b2Juox2",
    "test4" : "BaKWaeGrTzXHe4EQ60gpWYOoxKD2",
    "test6" : "nNl6pa0s7ZXULV0yFSIV4dLP0s13"

i couldnt understand what it says. what i am doing wrong ? i can subscribe data in array form like i want but cannot list it with *ngfor please assist me thanks.

Upvotes: 0

Views: 519

Answers (1)

Alex Onozor
Alex Onozor

Reputation: 7081

I don't know how you have structured your data from firebase but friend request is not an Array so Angular can't iterate over it.

You can fix this by re-structuring your data to: 

"users" : {
"3YG0aYta1AP28COa7hdopwvICt63" : {
  "friendrequests" : [ 
   { "test1" : "7LXXTyAH9MeKyqRBg3oP7b2Juox2" },
   { "test2" : "7LXXTyAH9MeKyqRBg3oP7b2Juox2" },
]

Then you can do the loop from the template but don't forget to next the response value properly like this:

this.afDatabase.list(`users/${this.myUid}/friendrequests/`).subscribe(data => {

    this.friendRequestArray = data.this.myuid.friendrequests;
    console.log(this.friendRequestArray);
  });

Upvotes: 2

Related Questions