我有用户部分字段,其中我有用户,所以现在我必须在用户下方显示最后一条消息。我如何使消息显示在那里。
HTML:
<mat-tab label="Active">
<mat-icon for="search">search</mat-icon>
<input type="search" name="search" class="search" placeholder="Company">
<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>
</mat-tab>
这是我添加的虚拟对象,在此我需要在此处显示最后的消息对话。
<p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.text}}</b></p>
最后的消息对话在这里。
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.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;
this.message_show.messages.map(function(msg) {
if(msg.from_user_id == test.from_user_id) {
msg.from_user_image = test.from_user_image;
} else {
msg.from_user_image = test.to_user_image;
}
if(msg.to_user_id == test.to_user_id) {
msg.to_user_image = test.to_user_image;
} else {
msg.to_user_image = test.to_user_image;
}
})
}
}
},error => {});
}
在这个我得到一个数组内的消息字段
var test = this.message_show = this.activeMessages[0];
所以在 activeMessages[0].messages 我得到消息列表,我希望最新消息显示在 html 中。