как показать последнее сообщение разговора с помощью angular2

Question

У меня есть поле раздела пользователя, в котором у меня есть пользователи, поэтому теперь я должен отобразить последнее сообщение под пользователем. Как сделать сообщение для отображения там.

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.

утешал:

Answer 1

Заменить эту строку ниже

   <p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.text}}</b></p>   

с

 <p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text- 
     overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>

Answer 2

Вы можете получить последний элемент ваших activeMessages внутри вашего компонента следующим образом:

let lastMessage:any = this.activeMessages[0][this.activeMessages[0].length-1];

и затем получите доступ к переменной lastMesage внутри html. Если вам нужен последний текст сообщения, вы должны получить доступ к этому внутри html.

<p> {{lastMessage.text}} </p>