有没有办法避免在 Ionic 3 中的列表更新后视图闪烁？

Question

我是 Ionic 3 和 firebase 的新手，我正在尝试做一个聊天功能。我的问题是当我用新值更新数组时，视图中的整个列表似乎闪烁/闪烁。有没有办法防止这种情况？我需要更改我的代码吗？

代码（用户聊天.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;
  });
}

查看（用户聊天.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 Messenger 应用程序中，其中最新的对话放在最上面，只将另一个对话向下滑动。

代码检索数据 查看代码

Answer 1

我遇到了这个类似的问题。我可以通过在 *ngFor 中添加 trackBy 来解决这个问题。 https://angular.io/api/core/TrackByFunction

<ion-list *ngFor="let item of itemsList; trackBy: trackByFn">...</ion-list>

并在 ts 文件中：

 trackByFn(index: number, item: any): number {
   return item.serialNumber;
}

Answer 2

该行导致列表闪烁this.chatList = chatArray;

这一行正在替换整个变量。这会导致 Angular 认为整个数据已更改，因此会重新加载。您可以尝试做的是将最后一个元素推入this.chatList.

因此，不要chatArray.push(data);尝试这样做this.chatList.push(data)。

阅读角度变化检测。