Как сделать разговор пустым, когда вкладка изменена и сообщения пусты

Question

У меня есть раздел беседы от конкретного пользователя. Итак, теперь, если я переведу пользователя из закрытого состояния в активное состояние, вкладка останется пустой, но диалоги активной части будут видны в закрытой части.

Мое требование работает, когда оно обновляется. Итак, теперь я хочу, чтобы разговоры также были пустыми, когда нет закрытых сообщений даже до обновления.

HTML:

<div class="messageDiv" id="closedSection" *ngIf="closemessage && selectedTab == 1">
      <div class="headerSection">
        <div *ngIf="message_close != undefined">
          <img *ngIf="message_close != undefined" [src]="message_close.from_user_image || '../assets/images/msg.png'"/>
        </div>
        <div id="paragraph" *ngIf="message_close != undefined">
          <h3>{{message_close.from_user_name}}</h3>
          <p style="margin-top: -3.5%;margin-right: 24%;float: right;"><b>Date : </b> {{message_close.updated_at | date:'dd.MM.yyyy'}}</p>
        </div>
      </div>
      <ul>
        <li *ngIf="message_close == undefined || message_close.messages.length == 0|| message_close.messages.length == undefined"> 
          <p>There is no closed messages.</p> 
        </li>
        <span *ngIf="message_close != undefined && message_close.messages.length > 0"> 
          <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>
        </span>
      </ul>
      <button mat-mini-fab style="background-color: #a73036;position: absolute;margin-top: 60px;right: 5%;height: 50px;width: 50px;"><img src="../../../assets/images/navBar/message.png" alt="message" style="padding: 5px 5px 0px 9px;" (click)="addCloseMessages(message_close)"></button>
      <textarea placeholder="Reply..." [(ngModel)]="closedMessage"></textarea>
    </div>

Ts:

addCloseMessages(message_close) {
    if (!this.closedMessage || !this.closedMessage.trim()) {
      alert('Write a message');
      return;
    }
    var data = {
      text: this.closedMessage,
      to_user_id: message_close.from_user_id,
      proposal_id: message_close.proposal_id
    }
   this.service
       .sendMessage(data)
       .subscribe(
         response => {
           this.toasterService.pop('success', 'Successfully Added Message');
           this.closedMessage = '';
           this.loadMessages();
           this.changeTab();   
        }, error => {
           this.toasterService.pop('error', 'Failed to add Message');
        });
 }

Answer 1

если вы обновите страницу, в это время разговор будет понятен, но когда вы просто измените вкладку, разговор не будет очищен, означает, что со стороны базы данных ваш разговор очищен, но со стороны html нет,

в соответствии с вашим общим html message_close является объектом для показа вашего разговора, поэтому для очистки закрытой части вы должны установить его как неопределенное, тогда ваша проблема будет решена, поэтому очистите html, установив undefined в message_close в функции changeTab, как показано ниже,

changeTab() {   
this.selectedTab = 0;   
 this.closemessage = false;
this.message_close = undefined;//this will clear your html without refresh

 }