Как показать раздел закрытых сообщений, даже если нет разговоров с использованием angular2

Question

у меня 2 вкладки

1. У меня есть вкладка активных сообщений, которая работает нормально.
2. У меня есть закрытая вкладка сообщений, если у меня нет сообщений на закрытой вкладке сообщений, появляется ошибка, эта ошибка происходит из-за того, что я зациклен на переднем конце.

Итак, кто-нибудь может помочь мне решить эту проблему .. Несмотря на то, что у меня нет разговора в закрытой вкладке, он должен показывать пустое поле, и если я изменяю вкладку, он также должен работать нормально.

HTML:

<ul>
        <li *ngFor="let reply of message_close.messages">
          <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
          <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
          <p>{{reply.text}}</p>
        </li>
      </ul>

Ts:

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.closedMessages.length > 0) {
                if(!this.message_close) {
                  var test2 = this.message_close = this.closedMessages[0];
                  this.message_idc = this.closedMessages[0].id;
                  this.message_close.messages.map(function(msg) {
                    if(msg.from_user_id == test2.from_user_id) {
                      msg.from_user_image = test2.from_user_image;
                    } else {
                      msg.from_user_image = test2.to_user_image;
                    }
                    if(msg.to_user_id == test2.to_user_id) {
                      msg.to_user_image = test2.to_user_image;
                    } else {
                      msg.to_user_image = test2.to_user_image;
                    }
                  })
                }
              }              
            },error => {});
  }

Answer 1

вы можете сделать это с помощью ngIf,

    <ul>
       <li *ngIf="message_close == undefined || message_close.messages.length == 0|| message_close.messages.length == undefined">
          <p>there is no closed messages.</p>
         </li>

        <li *ngFor="let reply of message_close.messages" >
          <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
          <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
          <p>{{reply.text}}</p>
        </li>

      </ul>