I currently have 2 tabs set up on my page.
- The active messages tab is functioning perfectly without any issues.
- However, I am encountering an error with the closed messages tab. If there are no messages in this tab, the system displays an error message which seems to be caused by a front-end looping issue.
Could someone please assist me in resolving this problem? I would like the closed tab to display an empty field when there are no conversations present. Additionally, it should function properly even when switching between tabs.
Below is the HTML code snippet:
<ul>
<li *ngFor="let reply of message_close.messages">
<img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
<p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
<p>{{reply.text}}</p>
</li>
</ul>
And here is the TypeScript code snippet:
loadMessages() {
this.service
.getMessages()
.subscribe(
data => {
this.messagesdata = data;
this.activeMessages = data.filter(msg => msg.active == true && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0)
this.closedMessages = data.filter(msg => msg.active == false && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0);
if (this.closedMessages.length > 0) {
if(!this.message_close) {
var test2 = this.message_close = this.closedMessages[0];
this.message_idc = this.closedMessages[0].id;
this.message_close.messages.map(function(msg) {
if(msg.from_user_id == test2.from_user_id) {
msg.from_user_image = test2.from_user_image;
} else {
msg.from_user_image = test2.to_user_image;
}
if(msg.to_user_id == test2.to_user_id) {
msg.to_user_image = test2.to_user_image;
} else {
msg.to_user_image = test2.to_user_image;
}
})
}
}
},error => {});
}