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

【问题标题】：Ionic : ngIf statement inside a ngFor not workingIonic：ngFor 中的 ngIf 语句不起作用
【发布时间】：2019-07-20 19:07:26
【问题描述】：

我想在 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 数组：

【问题讨论】：

您能fork this Sample StackBlitz 尝试复制您的问题吗？
你的ChatListArray 怎么样？
@SiddAjmera 在我的情况下不起作用
你的 JSON 看起来很奇怪。它应该是一个对象数组（= 你的聊天），但它......不是真正的数组。

标签： angular ionic-framework ionic3 ionic4

【解决方案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是迭代中的下一个：

[
{"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"}
]

【讨论】：

{{chat.msg }} 仅在 ngif 语句之外显示值
分享你的 {{chat}} 对象