角度未将表单数据推送到数组中

问题描述 投票:0回答:1

我正在尝试创建一个简单的消息传递应用程序。在不重新加载页面的情况下,我想将用户写入数组和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);

  }
angular
1个回答
0
投票

我认为我们将从“ 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); })。

类似的东西。但是,如果不知道您要发送的内容和所收到的内容,我能提供的其他帮助不多。这只是一些一般信息。祝你好运!

© www.soinside.com 2019 - 2024. All rights reserved.