我是 Ionic 3 和 firebase 的新手,我正在尝试做一个聊天功能。我的问题是当我用新值更新数组时, View 中的整个列表似乎闪烁/闪烁。有没有办法防止这种情况?我需要更改我的代码吗?
代码(用户聊天.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 应用程序中的结果,其中最新的对话放在最上面,只将另一个对话向下滑动。
Code retrieving data Code for view
最佳答案
我遇到了这个类似的问题。我可以通过在 *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;
}
关于angular - 有没有办法避免在 Ionic 3 中的列表更新后 View 闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54398800/