I'm dealing with an array of data fetched from the backend and I need to meet the following requirements:
- If the user's name,
"from_user_name", isAnonymus, then the contents must be hidden. - Hide the messages if the array is empty.
Can someone assist me in resolving these 2 conditions?
HTML:
<ul>
<li *ngFor="let message of activeMessages" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
<span>{{message.updated_at | date:'dd.MM.yyyy'}}</span>
<img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
<p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
<p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.text}}</b></p>
</li>
</ul>
TS:
loadMessages() {
this.service
.getMessages()
.subscribe(
data => {
this.messagesdata = data;
this.activeMessages = data.filter(msg => msg.active == true);
this.closedMessages = data.filter(msg => msg.active == false);
if (this.activeMessages.length > 0) {
if(!this.message_show) {
var test = this.message_show = this.activeMessages[0];
this.message = true;
this.message_id = this.activeMessages[0].id;
}
console.log(this.activeMessages);
}
},error => {});
}
Console: https://i.sstatic.net/cDIe6.png