我正在尝试创建一个简单的消息传递应用程序。在不重新加载页面的情况下,我想将用户写入数组和db的所有内容推送到页面,然后将* ngFor该数组推送到页面。感谢您的帮助!
<div id="messageBody" *ngFor="let message of messageInfo">
<ul class="chatBox">
<li [ngClass]="[message.creator._id === this.user ? 'me' : 'him']" id="timeStamp"> <span
id="messageStats">{{message.creator.name}}<br>{{message.creationDate | date: 'medium'}}</span><br><br>
{{message.message}}</li>
</ul>
</div>
<div id="messageBody" *ngIf="replying && messageSent">
<div id="chatBoxContainer">
<ul class="chatBox" *ngFor="let post of this.currentPosts">
<li class="me" id="timeStamp"> <span id="messageStats"> Your Reply
<br>{{post.replySentTimeStamp | date: 'medium'}}</span><br> <br> {{post.replyMessage}}</li>
</ul>
</div>
</div>
message.component.ts
sendReplyMessage(form: NgForm) {
if (form.invalid) {
return;
}
let currentMessages = [];
form.value.replySentTimeStamp = Date.now();
currentMessages.push(...[{timeStamp: Date.now(), message: form.value.message}]);
this.replyMessage = "";
this.replying = true;
this.messageSent = true;
this.creationDate = new Date();
this.toastr.success('Message Sent');
this.replySentTimeStamp = new Date();
this.messagingService.replyToMessage(this.name, this.replyMessage, this.creationDate, this.lastSenderId, this.subject, this.messageTrackingIdResponse);
}
我认为我们将从“ this.messagingService.replyToMessage(.....“)之后发生的事情的更多信息中受益”>
如果它返回消息,那么您希望将该消息插入到messageInfo数组中。然后,您将可以在for循环中看到它。因此,如果您的messagingService返回了该消息,那么您将需要:
“ this.messageInfo.push(this.messagingService.replyToMessage(....”
但是,如果您的服务正在发出http请求,并期望从API中返回带有消息的响应,那么您希望在该行的末尾添加一个订阅,并为响应列出该订阅,然后添加消息到messageInfo数组:
this.messagingService.replyToMessage(this.name,this.replyMessage,this.creationDate,this.lastSenderId,this.subject,this.messageTrackingIdResponse).subscribe(res => {this.messageInfo.push(res.body); })。
类似的东西。但是,如果不知道您要发送的内容和所收到的内容,我能提供的其他帮助不多。这只是一些一般信息。祝你好运!