如何在 ngFor 中使用嵌套 json 对象
How to use nested json object with ngFor
我在遍历 json 对象以显示消息时遇到问题。
场景是我将 from_id
发送到 to_id
的消息和 jsonData
如下:
jsonData={
"chat":
{
"79":
{
"from":"Testing Page - joe",
"from_id":79,
"to":"userTestName",
"to_id":1548,
"unread":2,
"messages":
[
{"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
{"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
]
},
"44":
{
"from":"Rock Music Band",
"from_id":44,
"to":"userTestName",
"to_id":1548,
"unread":1,
"messages":
[
{"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
]
}
},
"unread":3
}
我在使用 angular *ngFor
:
在 <ul>
中显示这些消息时遇到问题
<ul>
<li *ngFor="let messageData of jsonData.chat;>
<div class="message-info">
<h4>{{messageData.from}}</h4>
<h4>{{messageData.messages[0].text}}</h4>
</div>
</li>
</ul>
我收到不支持对象的错误消息。
ERROR Error: Cannot find a differ supporting object '[object Object]'
of type 'object'. NgFor only supports binding to Iterables such as
Arrays.
我的 json数据应该是什么样子才能显示消息?我希望每个 id 79
- ‘44’ 是一个单独的对象。
jsonData
是对象而不是数组,因此出错。您可能想使用 KeyValuePipe:
<ul>
<li *ngFor="let data of jsonData.chat | keyvalue>
<div class="message-info">
<h4>{{jsonData.chat[data.key].from}}</h4> <!-- Or even better: data.value.from -->
<h4>{{jsonData.chat[data.key].messages[0].text}}</h4> <!-- Or even better: data.value.messages[0].text -->
<!-- Want to loop through your messages? -->
<ul>
<li *ngFor="let message of data.value.messages">{{message.text}}</li>
</ul>
</div>
</li>
</ul>
尽管将数据转换为数组可能是值得的。
您必须将 json 格式化为数组,以便 ngFor 工作,
我认为这就是您要找的东西:
https://stackblitz.com/edit/angular-h7ezpn?file=src%2Fapp%2Fapp.component.ts
"chat":
[
{"title" :"79",
"content":
{
"from":"Testing Page - joe",
"from_id":79,
"to":"userTestName",
"to_id":1548,
"unread":2,
"messages":
[
{"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
{"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
]
}},
{
"title" :"44",
"content":
{
"from":"Rock Music Band",
"from_id":44,
"to":"userTestName",
"to_id":1548,
"unread":1,
"messages":
[
{"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
]
}}
],
"unread":3
}
我在遍历 json 对象以显示消息时遇到问题。
场景是我将 from_id
发送到 to_id
的消息和 jsonData
如下:
jsonData={
"chat":
{
"79":
{
"from":"Testing Page - joe",
"from_id":79,
"to":"userTestName",
"to_id":1548,
"unread":2,
"messages":
[
{"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
{"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
]
},
"44":
{
"from":"Rock Music Band",
"from_id":44,
"to":"userTestName",
"to_id":1548,
"unread":1,
"messages":
[
{"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
]
}
},
"unread":3
}
我在使用 angular *ngFor
:
<ul>
中显示这些消息时遇到问题
<ul>
<li *ngFor="let messageData of jsonData.chat;>
<div class="message-info">
<h4>{{messageData.from}}</h4>
<h4>{{messageData.messages[0].text}}</h4>
</div>
</li>
</ul>
我收到不支持对象的错误消息。
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
我的 json数据应该是什么样子才能显示消息?我希望每个 id 79
- ‘44’ 是一个单独的对象。
jsonData
是对象而不是数组,因此出错。您可能想使用 KeyValuePipe:
<ul>
<li *ngFor="let data of jsonData.chat | keyvalue>
<div class="message-info">
<h4>{{jsonData.chat[data.key].from}}</h4> <!-- Or even better: data.value.from -->
<h4>{{jsonData.chat[data.key].messages[0].text}}</h4> <!-- Or even better: data.value.messages[0].text -->
<!-- Want to loop through your messages? -->
<ul>
<li *ngFor="let message of data.value.messages">{{message.text}}</li>
</ul>
</div>
</li>
</ul>
尽管将数据转换为数组可能是值得的。
您必须将 json 格式化为数组,以便 ngFor 工作, 我认为这就是您要找的东西: https://stackblitz.com/edit/angular-h7ezpn?file=src%2Fapp%2Fapp.component.ts
"chat":
[
{"title" :"79",
"content":
{
"from":"Testing Page - joe",
"from_id":79,
"to":"userTestName",
"to_id":1548,
"unread":2,
"messages":
[
{"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
{"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
]
}},
{
"title" :"44",
"content":
{
"from":"Rock Music Band",
"from_id":44,
"to":"userTestName",
"to_id":1548,
"unread":1,
"messages":
[
{"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
]
}}
],
"unread":3
}