I'm trying to display a list of conversations in my Angular app, & then display the messages contained within those various conversations underneath each Conversation Title .
Here is my latest code -
HTML:
<div
class="card"
style="width: 18rem;"
*ngFor="let conversation of myConversations"
>
<div class="card-body">
<h5 class="card-title">{{ conversation.conversationTitle }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
Conversation ID: {{ conversation.conversationId }}
</h6>
<p *ngFor="let message of myConversationMessages" class="card-text">
{{ message.messageText }}
</p>
</div>
TS:
myConversations: IConversation[] = [];
myConversationMessage: IConversationMessages = {
conversationId: 0,
messageId: 0,
messageText: ''
};
myConversationMessages: IConversationMessages[] = [];
constructor(private conversationService: ConversationService) {}
ngOnInit() {
this.conversationService.getConversations().subscribe(conversations => {
this.myConversations = conversations;
this.displayMessages();
});
}
displayMessages() {
for (let i of this.myConversations) {
for (let j of i.messages) {
this.myConversationMessages.push({
conversationId: i.conversationId,
messageId: j.messageId,
messageText: j.messageText
});
}
}
console.log(this.myConversationMessages);
}
This is what I'm currently able to display at the moment:
Each conversation has it's own card, but the messages are being repeated for all conversations, regardless of which conversation they're connected to.
I think I need to make some change to the inner ngFor , but I'm not exactly sure which change to make. Any ideas on what changes are required? Thanks!
Also, here is the associated JSON:
[
{
"conversationId": 1,
"conversationTitle": "My first convo",
"messages": [
{
"messageId": 1,
"messageText": "Hi"
},
{
"messageId": 2,
"messageText": "Hello"
}
]
},
{
"conversationId": 2,
"conversationTitle": "My second convo",
"messages": [
{
"messageId": 1,
"messageText": "test"
},
{
"messageId": 2,
"messageText": "testing"
}
]
}
]
Based of the JSON you have provided you should be able to use an *ngfor
, inside the *ngfor
to read the messages. I have stripped away some of the elements but the following should give you the result you need. Based of the JSON in the question.
Solution
<div class="card" style="width: 18rem;" *ngFor="let conversation of myConversations">
<div class="card-body">
<h5 class="card-title">
{{ conversation.conversationTitle }}
</h5>
<h6 class="card-subtitle mb-2 text-muted"> Conversation ID:
{{ conversation.conversationId }}
</h6>
<div *ngFor="let message of conversation.messages" class="card-text">
<span>
{{ message.messageText }}
</span>
</div>
</div>
</div>
If the JSON is the initial myConversations
then you will not need to do anything more with that data as it is already enough to work with.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.