离子：ngFor 中的 ngIf 语句不起作用

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 :

Answer 1

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. Eg 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"}
]