Ionic : ngIf statement inside a ngFor not working

Question

I want to display data from database with the help of ngfor. I want to use ngif for implement some display condition .

my code :

<ion-grid *ngFor="let chat of ChatListArray"> <ion-row *ngIf="chat.status == 'Incoming'"> <ion-col > <div> {{chat.msg}} </div> </ion-col> </ion-row> <br> <ion-row *ngIf="chat.status == 'Outgoing'"> <ion-col > <div> {{chat.msg }} </div> </ion-col> </ion-row> </ion-grid>

But its not working . how to use if statement properly please help.

{{chat.msg }} does not display any data. but outside the ngif its works.

My json array :

Can you fork this Sample StackBlitz and try to replicate your issue? — SiddAjmera
– SiddAjmera, Commented Jul 20, 2019 at 9:13
Your JSON looks weird. It should be an array of objects (= your chat) but it is ... not really a array. — akop
– akop, Commented Jul 20, 2019 at 10:47

StepUp · Accepted Answer · 2019-07-20 11:07:26Z

Your code looks ok and it should work. It looks like you have typo into ChatListArray or Incomming. Maybe Incoming?

What you can do is to use json pipe to see values of chat.status to understand what values you are iterating:

<ion-grid *ngFor="let chat of ChatListArray"> <div> {{chat | json }} </div> </ion-grid>

Your array contains just one object messages, so this is a reason why you cannot see any messages. E.g. ngIf=chat.status == 'Incoming', it works and it will get this object {"status":"Outgoing"}, but this object does not have any msg object, because this object msg is the next in an iteration:

[ {"id":1}, {"number":"+..."}, {"status":"Outgoing"}, {"msg": "hello"}, {"id":2}, {"number":"+..."}, {"status":"Incoming"}, {"msg": "hello"}, {"id":3}, {"number":"+..."}, {"status":"Outgoing"}, {"msg": "hello"}, ]

It will work, if you have such objects in your array:

[ {"id":1, "number":"+...", "status":"Outgoing", "msg": "hello"}, {"id":2, "number":"+...", "status":"Incoming", "msg": "hello"}, {"id":3, "number":"+...", "status":"Outgoing", "msg": "hello"} ]

Collectives™ on Stack Overflow

Ionic : ngIf statement inside a ngFor not working

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related