*ngFor is used yet html shows object,object

Ionic Framework ionic-v3
1

Hi guys, need help why doesn’t my html show the data instead showing of [object,object]. I have used ngFor to load the array.

This is my html code,

    <ion-list>
        <ion-item *ngFor="let x of allItemRef$ | async;">
            {{x.anArray}}
        </ion-item>
    </ion-list>

this is ts code

allItemRef$: FirebaseListObservable<allItem[]>

  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public database: AngularFireDatabase) {

   this.allItemRef$ = this.database.list('list');
  }

I looked up other tutorial, they uses ngFor it works what have I done wrong?

Thankyou.

2

Try

    <ion-list>
        <ion-item *ngFor="let x of allItemRef.anArray | async;">
            {{x}}
        </ion-item>
    </ion-list>

Or if you have an array inside an array

    <ion-list>
        <ion-item *ngFor="let x of allItemRef$ | async;">
            <span *ngFor="let y of x.anArray">
                {{y}}
            </span>
        </ion-item>
    </ion-list>
3

Thankyou, for the reply and help. Nope both of the code don’t work.

  1. The code stated that, “Identifier ‘allItemRef’ is not defined. The component declaration, template variable declarations, and element references do not contain such a member”.

So I added the dollar sign it became

“Identifier ‘anArray’ is not defined. ‘FirebaseListObservable’ does not contain such a member”

For the 2) I do feel that my code is array in array. However, nothing appear.

Thankyou once again.

4

What is the output when you console.log(allItemRef) in your ts-file?

5

the output is [object Object].

if I do a for loop same output, [object Object].

for ( let i in this.allItemRef$){
    console.log(this.allItemRef$);
   }

If I put into
console.log(JSON.stringify(this.allItemRef$));

it return me error message:
ERROR TypeError: Converting circular structure to JSON
at JSON.stringify ()

6

the output is [object Object].

Can you expand the [object Object] in the terminal?

7

I can’t seems to expend it.

help
help.png746×137 2.92 KB

help
help.png1307×164 16.5 KB

thankyou.

8

Anyone could help I have been struggle for past few days thanks.

9
10

just ngFor change to ngIf

11

Can you teach me how to use it? Because I am not able to apply it into using for loop. Infact it looks weird.

12

You can try like this.

html code

<div *ngFor="let item of users">

  <ion-item>
    <h2>Name : {{item.Name}}</h2>
  </ion-item>
</div>

ts file

export class HomePage {
users: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {

  }


 ionViewDidLoad() {
   var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

     this.http.get("url")
     
      .subscribe((res:Response)=>{
      let dataTemp = res.json(); //dataTemp is the json object you showed me
      this.users = dataTemp.GetAllUsers; //contains a [] object with all yours users

  })

 };