angular - 有没有办法避免在 Ionic 3 中更新列表后视图闪烁?
问题描述
我是 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;
});
}
查看(用户聊天.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 应用程序中的结果,其中最新的对话被放在最上面,并且只会将另一个对话滑下来。
解决方案
我遇到了类似的问题。我可以通过在我的 *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;
}
推荐阅读
- android - 项目点击侦听器内的 Android on touch 侦听器
- discord.js - Bot ping 即将到来
- javascript - 我如何“等待”异步 super() 构造函数?
- firebase - 无法在 Firebase 托管后面调用 Google Cloud Function - 状态 503,但状态页面上没有指示
- wso2 - Wso2 apim 3.2 与 Wso2 公里 5.10
- html - 如果同一个类出现在它之后,可以为元素设置样式吗?
- flutter - Flutter 应用程序自动检测超链接并通过点击打开它
- ios - 上下图像视图,反之亦然 Swift/iOS
- winapi - DrawFocusRect 函数:Windows 10 中奇怪的 2 像素焦点矩形
- python - Sentinel3 OLCI (chl) Python 上 netcdf 文件的平均值