Ionic：ngFor中的ngIf语句不起作用

Question

我想借助ngfor显示数据库中的数据。我想使用ngif实现某些显示条件。

我的代码：

<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>

但是它不起作用。如何正确使用if语句，请提供帮助。

{{chat.msg}}不显示任何数据。 但是在ngif之外，它的作品。

我的json数组：

Answer 1

您的代码看起来还可以，并且可以正常工作。您似乎输入ChatListArray或Incomming时有错字。也许Incoming？

您可以使用json管道查看chat.status的值来了解您要迭代的值：

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

您的数组仅包含一个对象消息，因此这就是您看不到任何消息的原因。例如。 ngIf=chat.status == 'Incoming'，它可以工作，并且将获得该对象{"status":"Outgoing"}，但是该对象没有任何msg对象，因为该对象msg是迭代中的下一个对象： / p>

[
{"id":1},
{"number":"+..."},
{"status":"Outgoing"},
{"msg": "hello"},

{"id":2},
{"number":"+..."},
{"status":"Incoming"},
{"msg": "hello"},

{"id":3},
{"number":"+..."},
{"status":"Outgoing"},
{"msg": "hello"},
]

如果数组中有此类对象，它将起作用：

[
{"id":1, "number":"+...", "status":"Outgoing", "msg": "hello"},

{"id":2, "number":"+...", "status":"Incoming", "msg": "hello"},

{"id":3, "number":"+...", "status":"Outgoing", "msg": "hello"}
]