In a Ionic2+Angular2+Meteor mobile app, contacts are listed with infinite-scrolling option. Contacts are supposed to be appended in the batch of 20 during scrolling.
import {Observable} from "rxjs";
contacts: Observable<Contact[]>;
/* code to pull Contacts from collection */
findContacts() :Observable<Contact[]> {
return Contacts.find({accessGroup: {$in: this.sourcingUser.accessGroup}
}, {sort: {firstName: 1}} )
.mergeMap<Contact[]>(contacts =>
Observable.combineLatest(
...contacts.map(contact =>
Suppliers.find({supplierId: contact.supplierId})
.startWith(null)
.map(suppliers => {
if(suppliers){
contact.supplier = suppliers[0];
}
return contact;
})
))).zone();
}
// Code to append contacts
this.contactsSub = MeteorObservable.subscribe('contacts', options).subscribe(() => {
MeteorObservable.autorun().subscribe(() => {
if(!this.contacts){
this.contacts = this.findContacts();
} else {
this.contacts = this.contacts.merge(this.findContacts());
}
});
});
This code works fine when the first 20 contacts displayed and next 20 gets appended. But after that, evertime, it keeps the first 20 contacts and newly appneded contacts get replaced with the new 20 contacts from findContacts() method.
So it always displays only 40 contacts. Is there anyway to keep append/merge the contacts to the existing contacts list? Any help is very much appreciated.
Thanks, Annadurai.
The root cause of the issue is due to the performance issue while doing mergeMap in my case. I've removed the mergeMap and handled the business requirement in different way to resolve this reported issue.