Есть ли способ избежать мерцания вида после обновления списка в Ionic 3? - PullRequest
Новая
       7

Есть ли способ избежать мерцания вида после обновления списка в Ionic 3?

0 голосов
/ 28 января 2019

Я новичок в Ionic 3 и Firebase, и я пытаюсь сделать функцию чата.Моя проблема в том, что когда я обновляю массив новыми значениями, кажется, что весь отображаемый список мигает / мигает.Есть ли способ предотвратить это?Нужно ли менять свой код?

Код (user-chat.ts) 

getChats(){  
//Add by index idea to avoid blinking?
this.chatObserver = this.db.list('chat', ref => ref.child(this.authKey).orderByChild('timestamp'))
  .snapshotChanges().subscribe( snapshot => {
    let reversedSnap = snapshot.slice().reverse();
    let chatArray = [];
    reversedSnap.forEach( element =>{
      let data = element.payload.val();
      data['id'] = element.key;

      this.db.list('profile', ref=> ref.child(data['receiver'])).query.once('value', profileSnap => {
          let profileData = profileSnap.val();
          data['firstName'] = profileData.firstName;
          data['lastName'] = profileData.lastName;
          data['userImage'] = profileData.photos[0];
          data['userKey'] = profileSnap.key;
      })
      this.db.list('messages', ref=> ref.child(this.authKey).child(data['id']).orderByChild('timestamp').limitToLast(1))
        .query.once('value', messageSnap =>{
          messageSnap.forEach( element =>{  //only returns one, foreach to include checking if got 1
            let messageData = element.val();
            Object.assign(data, messageData);
            let message = ((data['sender'] === this.authKey)? "You: " : (data['firstName']+": "))+data['message'];
            data['message'] = (message.length>25 ? message.substring(0, 25)+"..." : message);
            data['messageDate'] = this.messageDateFormat(data['timestamp']);
          });
        chatArray.push(data);  
      });
    });
    this.chatList = chatArray;
  });
}

Просмотр (user-chat.html) 

<ion-item-sliding *ngFor="let chat of chatList" >
            <button ion-item no-lines class="chat_content" (click)="openChat(chat.id, chat.receiver)">
                    <img class="circle-pic" src="{{chat.userImage}}" item-start>
                <h2 class="content">{{chat.firstName}} {{chat.lastName}}</h2>
                <p class="content">
                    <b *ngIf="!chat.isRead">{{chat.message}}</b>
                    <span *ngIf="chat.isRead">{{chat.message}}</span>~ {{chat.messageDate}}</p>
            </button>
            <ion-item-options side="left">
              <button ion-button no-lines ion-button class="chat_buttons" color="secondary" (click)="favorite(item)">
                <ion-icon class="chat_icons" name="star"></ion-icon>
              </button>
              <button ion-button class="chat_buttons" (click)="unread(item)">
                <ion-icon class="chat_icons" name="disc"></ion-icon>
              </button>
            </ion-item-options>

            <ion-item-options side="right">
              <button ion-button no-lines class="chat_buttons" color="danger" (click)="share(item)">
                <ion-icon class="chat_icons" name="trash"></ion-icon>
              </button>
            </ion-item-options>
        </ion-item-sliding>

Что яожидайте - это результат, как в приложении мессенджера facebook, где последний разговор помещается сверху и только сдвигает другой разговор вниз.

Код, извлекающий данные Код для просмотра

1 Ответ

0 голосов
/ 29 января 2019

Эта строка вызывает мигание списка this.chatList = chatArray;

Эта строка заменяет всю переменную.Это заставляет Angular думать, что все данные были изменены, и, следовательно, он перезагружается.То, что вы можете попытаться сделать, это вставить последний элемент в this.chatList.

Так что вместо chatArray.push(data); попробуйте выполнить this.chatList.push(data).

Прочитайте Обнаружение угловых изменений .

...